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

Teachin

I would start by aking sure it is truly css-loader that is slowing things down by using npmjs.com/package/speed-measure-webpack-plugin Then, probably use the include option to apply your loaders only to the files that need it webpack.js.org/guides/build-performance/#loaders – Vickeyvicki

@Vickeyvicki Output of SMP is included, with include it is same – Teachin

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 #56262637 You might try to cache the loader github.com/webpack-contrib/cache-loader or this alternative loader github.com/yibn2008/fast-sass-loader ' – Vickeyvicki

Answer 1

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/"),
          ]
        }
      }
    },
  ],
}

Lyophobic

so for compilations you will again wait for 10 seconds now @Lyophobic – Sycophancy

@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) – Lyophobic

is vite a lot faster @Lyophobic .Please let me know so i can try. Please tell some other compilers as well. Thank you :) – Sycophancy

@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) – Lyophobic

@AdarshRaj There are also Turbopack and rspack which promise to be even faster but I didn't try them yet – Lyophobic

Answer 2

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: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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.

Denys

scss is SASS though – Festoonery