webpack-contrib / sass-loader

Compiles Sass to CSS
MIT License
3.9k stars 428 forks source link

perf: reuse compiler process when using sass-embedded #1195

Closed renspoesse closed 5 months ago

renspoesse commented 5 months ago

This PR contains a:

Motivation / Use-Case

This implements the Shared Resources proposal that was accepted and implemented in Dart Sass 1.70.0. By reusing the same compiler process when compiling multiple files, this significantly improves performance for tools like webpack.

Breaking Changes

None

Additional Info

Closes: https://github.com/webpack-contrib/sass-loader/issues/1163

linux-foundation-easycla[bot] commented 5 months ago

CLA Signed

The committers listed above are authorized under a signed CLA.

alexander-akait commented 5 months ago

Thank you for your work, looks like a test passed, so let's add for two loader with different options and we can merge it, I will check the shutdown hook

codecov[bot] commented 5 months ago

Codecov Report

Attention: Patch coverage is 90.00000% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 94.11%. Comparing base (31789cc) to head (ea88129). Report is 2 commits behind head on master.

Files Patch % Lines
src/utils.js 88.23% 2 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #1195 +/- ## ========================================== - Coverage 94.44% 94.11% -0.33% ========================================== Files 3 3 Lines 360 374 +14 Branches 132 137 +5 ========================================== + Hits 340 352 +12 - Misses 18 20 +2 Partials 2 2 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

alexander-akait commented 5 months ago

Thank you, I will make perf benchmarks and show them in the release, also I want to finish built-in webpack resolver support for modern and modern-compiler API

alexander-akait commented 5 months ago

It really faster (sass-embedded):

asset main.js 931 KiB [compared for emit] (name: main) 1 related asset
runtime modules 1.58 KiB 7 modules
cacheable modules 890 KiB
  asset modules 5.2 KiB
    data:image/svg+xml,%3csvg xmlns=%27.. 281 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 281 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 279 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 161 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 271 bytes [built] [code generated]
    + 14 modules
  javascript modules 885 KiB
    modules by path ../../node_modules/ 509 KiB 12 modules
    modules by path ./src/ 376 KiB
      ./src/index.js 108 bytes [built] [code generated]
      ./src/style.scss 1.31 KiB [built] [code generated]
      ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 1284 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 841 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 515 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 524 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 507 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 467 ms

Just sass:

asset main.js 931 KiB [compared for emit] (name: main) 1 related asset
runtime modules 1.58 KiB 7 modules
cacheable modules 890 KiB
  asset modules 5.2 KiB
    data:image/svg+xml,%3csvg xmlns=%27.. 281 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 281 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 279 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 161 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 271 bytes [built] [code generated]
    + 14 modules
  javascript modules 885 KiB
    modules by path ../../node_modules/ 509 KiB 12 modules
    modules by path ./src/ 376 KiB
      ./src/index.js 108 bytes [built] [code generated]
      ./src/style.scss 1.31 KiB [built] [code generated]
      ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 4688 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 3680 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 3118 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 3124 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 3263 ms
asset main.js 931 KiB [emitted] (name: main) 1 related asset
cached modules 515 KiB [cached] 33 modules
runtime modules 1.58 KiB 7 modules
../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss 375 KiB [built] [code generated]
webpack 5.91.0 compiled successfully in 3055 ms

Around 10x times