sass-loader is slow in webpack

Question

I have small project (about 30 sass files), in sass I am using @import and @mixin...

My webpack development build is take about 30s (and still growing, last week it was 20s) and it is crazy...

My config is:

        {
          test: /\.scss$/,
          exclude: /(node_modules|bower_components)/,
          use: [
            {
              loader: "css-loader",
              options: {
                modules: {
                  localIdentName: '[local]___[hash:base64:5]',
                },
                sourceMap: false,
              },
            },
            { 
              loader: 'sass-loader', 
            }
          ],
        },

I need to speed up my local build... what is wrong with my config? Why it is so slow?

 SMP  ⏱  
General output time took 27.82 secs

 SMP  ⏱  Plugins
MiniCssExtractPlugin took 0.001 secs

 SMP  ⏱  Loaders
css-loader, and 
sass-loader took 27.14 secs
  module count = 68
modules with no loaders took 1.56 secs
  module count = 611
svg-sprite-loader took 0.204 secs
  module count = 1

I would start by aking sure it is truly `css-loader` that is slowing things down by using https://www.npmjs.com/package/speed-measure-webpack-plugin Then, probably use the `include` option to apply your loaders only to the files that need it https://webpack.js.org/guides/build-performance/#loaders — Mathieu, Apr 28 '20 at 08:47
After llooking into it a little, it seems that slow performance is a recurring thing with `sass-loader`, as seen here with a similar issue https://stackoverflow.com/questions/56262137/slow-sass-loader-build-times-with-webpack You might try to cache the loader https://github.com/webpack-contrib/cache-loader or this alternative loader https://github.com/yibn2008/fast-sass-loader ' — Mathieu, Apr 28 '20 at 09:08

score 6 · Answer 1 · answered Oct 06 '20 at 14:28

6

I encountered the same issue with sass-loader and tried a few solutions but the best solution was to use cache-loader
Now my build went down from 27s to just 10s

Before

After

Install:
npm i -D cache-loader

Usage:

{
  test: /\.(sa|sc|c)ss$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: "../",
        hmr: hotMode,
        reloadAll: true,
      },
    },
    // do not insert cache-loader above the extract css loader, it may cause issues
    "cache-loader", // <--------
    "css-loader?url=false",
    "postcss-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          hmr: true,
          modules: true,
          includePaths: [
            path.join(__dir, "/views/scss/theme/"),
          ]
        }
      }
    },
  ],
}

answered Oct 06 '20 at 14:28

unloco

6,928
2
47
58

so for compilations you will again wait for 10 seconds now @unloco – Adarsh Raj Feb 19 '23 at 04:33
@AdarshRaj In dev, I use vite. I only use webpack for the prod build. (plus I switched to a faster pc so it's not an issue) – unloco Feb 20 '23 at 07:10
is vite a lot faster @unloco .Please let me know so i can try. Please tell some other compilers as well. Thank you :) – Adarsh Raj Feb 26 '23 at 20:06
@AdarshRaj vite startup is faster because it doesn't compile all the modules in the bundle. Instead, it only compiles the files that are called by the script in the page. Vite's hot reloading is also faster, because it only recompiles the changed file(s) – unloco Feb 27 '23 at 21:12
1

@AdarshRaj There are also Turbopack and rspack which promise to be even faster but I didn't try them yet – unloco Feb 27 '23 at 21:13

score 0 · Answer 2 · answered Mar 22 '23 at 14:46

I have a real small prototype project with a maybe two page long styles.sass and my dev build with eval etc. took 16s. That was way too high.

I tried the cache-loader solution above and it only supports webpack 4.0 and I use webpack 5.0.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: dev@0.3
npm ERR! Found: webpack@5.76.2
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.75.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from cache-loader@4.1.0
npm ERR! node_modules/cache-loader
npm ERR!   dev cache-loader@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:

Then I found a fast-sass-loader node module which is also not maintained anymore.

Like in life the simplest solution are always the best. Don't use SASS as at all. I replaced my sass file with a scss file. With a relative small effort my build went from 16s to 7s and I haven't even optimized anything in the packaging yet.

sass-loader is slow in webpack

2 Answers2