在 Webpack 中 watch 编译期间加速 scss 的方法

Posted 2023-02-22

【中文标题】在 Webpack 中 watch 编译期间加速 scss 的方法

【英文标题】：Ways to speed up scss during watch compiling in Webpack

【发布时间】：2021-05-29 23:08:54

【问题描述】：

TLDR;滚动到底部以获得答案，或者结合使用 Webpack 和 Dart Sass VM。 https://github.com/sass/dart-sass/releases/

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

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

我正在使用 Webpack 5，最新版本的 sass-loader 和 sass。我还根据 Webpacks 的建议添加了 Fibers，但我真的没有看到任何改进。

我的 JS 在不到一秒的时间内编译完毕。

我也尝试了 Webpack 缓存中的 memory 和 filesystem 设置。我也试过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%']
        ,
    
;

【参考方案1】：

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

Sass 变得缓慢，因为进程中包含了许多 SASS 文件。 Big SASS-Frameworks 倾向于使用大量文件，当您使用大量大型模块时，它可能会严重减慢速度。有时包含的模块比需要的多。

通常标准项目设置会尝试同时进行大量工作。 IE。在同一过程中写入min-files 只会使时间翻倍。如果是这样：只需在工作结束时准备“最小文件”。到此为止，使用附加的后处理器来像 linter 和 maby postcss 这样的 autoprefix 需要额外的时间……这在一次编写 min-files 时会加倍……

JS-Sass-Compilers 更慢。因此，您可以直接使用本机 SASS 来节省时间。这可能并不漂亮，但在对我有很大帮助的大型项目中。如果您可以在这里尝试安装信息的链接：https://sass-lang.com/install

只是用于思考的想法......

【讨论】：

感谢您的意见！我关闭了源映射并删除了嵌套导入。我的慢速现在大约是 3 秒，而“缓存”或背靠背保存大约是 1.8 秒。我注意到我可以使用原生 sass，问题是让它与 Webpack 一起工作。

我应该将此标记为正确。最后，使用两者的组合。用于 JS / linting / browsersync 等的 Dart Sass VM 和 Webpack。 Webpack 仍在查看 scss 文件（browsersync 注入），但除此之外从未接触过它。原生使用 SASS 编译器实在是太快了，我只是对自己没有尽快组合这两个过程感到生气。