在Webpack中编译手表期间加速scs的方法

TLDR；滚动到底部获取答案，或者将Webpack和Dart Sass虚拟机结合使用。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
},
}
}
]
}]
};

我对postpass的浏览器支持是：

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

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

由于进程中包含了许多Sass文件，Sass变得很慢。大型SASS框架往往会使用大量文件，而最新版本的SASS框架在使用大量大型模块时可能会严重降低速度。有时包含的模块比需要的多。
通常，标准项目设置试图同时完成大量工作。也就是说，在同一过程中写入min-files只会使时间增加一倍。如果是这样的话：只需在工作结束时准备"最小文件"。到目前为止，使用额外的后处理器来自动改装，如linters和maby postpass需要额外的时间。。。一次写入最小文件时计数加倍。。。
JS Sass编译器的速度较慢。因此，您可以直接使用本机SASS来节省时间。这可能不帅，但在对我帮助很大的大项目中。如果您可以在此处尝试，请链接到如何安装的信息：https://sass-lang.com/install

只是向前思考的想法。。。

我有一个真正的小原型项目，可能有两页长的样式。sass和我的eval等开发构建耗时16秒。太高了。

我尝试了缓存加载程序解决方案，它只支持webpack4.0，而我使用的是webpack5.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:

然后我发现了一个快速的sass加载程序节点模块，它也不再维护了。

就像生活中最简单的解决方案总是最好的。根本不要使用SASS。我用scss文件替换了我的sass文件。只需相对较小的努力，我的构建就从16秒变成了7秒，我甚至还没有优化包装中的任何东西。

我敢肯定，当你用scss文件替换每个sass文件时，你的重新加载时间也会大幅下降。

我发现可以使用sass-embedded作为sass加载器的实现。您必须安装sass嵌入式软件包(https://www.npmjs.com/package/sass-embedded)并在您的配置中使用它：

{
loader: 'sass-loader',
options: {
implementation: require('sass-embedded'),
sassOptions: {
quietDeps: true
}
}
}

对我来说，在开发模式下，时间从20秒减少到3秒，在部署中，时间从140秒减少到50秒。

我在这篇文章中找到了答案：我可以使用嵌入的sass作为我的webpack.config.js 的sass加载程序的一部分吗

相关内容

最新更新

热门标签：