Ways to speed up scss during watch compiling in Webpack

Question

TLDR; Scroll to the bottom for the answer or combine both Webpack and Dart Sass VM. https://github.com/sass/dart-sass/releases/

Not sure if anyone else has run into this issue, but my first save while the files are being watched can take up 6-7 seconds ( 6720 ms ).

It then dips between 2-3.5 seconds typically.

I'm using Webpack 5, latest version of sass-loader and sass. I also included Fibers per Webpacks recommendation and I'm really not seeing any improvement.

My JS compiles in less than a second.

I've also tried both memory and filesystem setting in Webpack cache as well. I also tried cache-loader.

My current SCSS rules look like this:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Fiber = require('fibers');
const Sass = require('sass');
const config = require('../app.config');

module.exports = {
    rules: [{
        test: /\.s[ac]ss$/,
        exclude: /node_modules/,
        include: config.paths.sass,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: { sourceMap: true },
            },
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        config: path.resolve(__dirname, '../postcss.config.js'),
                    },
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true,
                    sassOptions: {
                        fiber: Fiber
                    },
                }
            }
        ]
    }]
};

My browser support for postcss is:

module.exports = {
    plugins: {
        'postcss-preset-env': {
            stage: 0,
            browsers: ['last 2 versions', 'not dead', '> 0.2%']
        },
    }
};

Answer 1

I do not work with Webpack itself but I know the effect from others ... there are three things to think about:

1. Sass becomes slowly as many SASS files are included to the process. Big SASS-Frameworks tend to use a lot of files and latest when you use a lot of big modules it heavily could slow down at all. Sometimes there are more modules included than needed.

2. Often the standard project settings try to to a lot of work at the same time. I.e. writing min-files in same process simply doubles the time. If it is that: just prepare 'min-files' at the end of your work. Up to that using additonal post-processors to autoprefix like linters and maby postcss needs extra time ... which counts doubles when writing min-files at once...

3. JS-Sass-Compilers are slower at all. So you can save time using native SASS direct. This may not be handsome but in big projects that helped me a lot. If you may try that here the link to information how to install: https://sass-lang.com/install

Just ideas for thinking forward...