问题描述
不确定其他人是否遇到过这个问题,但我在观看文件时的第一次保存可能需要 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%']
},}
};
解决方法
我不使用 Webpack 本身,但我知道其他人的效果......需要考虑三件事:
-
Sass 变得缓慢,因为该过程中包含了许多 SASS 文件。大型 SASS 框架倾向于使用大量文件,而最新的当您使用大量大型模块时,它可能会严重减慢速度。有时包含的模块比需要的多。
-
通常标准项目设置会尝试同时进行大量工作。 IE。在同一进程中写入
min-files
只会使时间加倍。如果是这样:只需在工作结束时准备“最小文件”。直到使用额外的后处理器来自动添加像 linters 和 maby postcss 这样的自动前缀需要额外的时间......当一次写入最小文件时,这会加倍...... -
JS-Sass-Compilers 根本就慢。因此,您可以直接使用原生 SASS 来节省时间。这可能不是很好,但在对我有很大帮助的大项目中。如果您可以在这里尝试安装信息的链接:https://sass-lang.com/install
只是前瞻性思考的想法......