Webpack 中 watch 编译时加速 scss 的方法

Question

太长了；滚动到底部寻找答案，或者将 Webpack 和 Dart Sass VM 结合起来。 https://github.com/sass/dart-sass/releases/

不确定其他人是否遇到过这个问题，但我在观看文件时的第一次保存可能需要 6-7 秒（6720 毫秒）。

然后它通常会下降 2-3.5 秒。

我正在使用 Webpack 5，最新版本sass-loader和sass. 我还Fibers按照 Webpacks 的建议添加了内容，但我确实没有看到任何改进。

我的 JS 编译时间不到一秒。

我也尝试过两者memory并filesystem在 Webpack 缓存中进行设置。我也尝试过cache-loader。

我当前的 SCSS 规则如下所示：

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
                    },
                }
            }
        ]
    }]
};

我的浏览器对 postcss 的支持是：

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

Answer 1

我不使用 Webpack 本身，但我知道其他人的效果......需要考虑三件事：

1. 由于进程中包含许多 SASS 文件，Sass 变得很慢。大 SASS 框架往往会使用大量文件，而最新的当您使用大量大模块时，它可能会严重减慢速度。有时包含的模块多于所需的模块。

2. 标准项目设置通常会尝试同时进行大量工作。即在同一进程中写入min-files只会使时间加倍。如果是这样：只需在工作结束时准备“最小文件”即可。到目前为止，使用附加后处理器来自动添加前缀（例如 linter 和 maby postcss）需要额外的时间……在一次写入最小文件时，这会增加两倍……

3. JS-Sass-编译器根本就慢。因此，您可以直接使用本机 SASS 来节省时间。这可能不太漂亮，但在大型项目中对我帮助很大。如果您可以尝试此处的链接，了解如何安装：https ://sass-lang.com/install

只是未来思考的想法......