Webpack watch 编译时加速 scss 的方法
Ways to speed up scss during watch compiling in Webpack
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%']
},
}
};
我不使用 Webpack 本身,但我知道其他人的效果......需要考虑三件事:
Sass 变得很慢,因为进程中包含了很多 SASS 个文件。大 SASS-Frameworks 往往会使用大量文件,而最近当您使用大量大模块时,它可能会严重减慢速度。有时包含的模块比需要的多。
标准项目设置通常会尝试同时进行大量工作。 IE。在同一个过程中写 min-files
只会使时间加倍。如果是这样:只需在工作结束时准备 'min-files' 即可。直到使用额外的 post-处理器像 linters 和 maby postcss 那样自动添加前缀需要额外的时间……当一次写入最小文件时,这会加倍……
JS-Sass-编译器一点都不慢。因此,您可以直接使用原生 SASS 来节省时间。这可能并不漂亮,但在对我有很大帮助的大项目中。如果您可以在此处尝试 link 以了解如何安装:https://sass-lang.com/install
前瞻性思考的想法...
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%']
},
}
};
我不使用 Webpack 本身,但我知道其他人的效果......需要考虑三件事:
Sass 变得很慢,因为进程中包含了很多 SASS 个文件。大 SASS-Frameworks 往往会使用大量文件,而最近当您使用大量大模块时,它可能会严重减慢速度。有时包含的模块比需要的多。
标准项目设置通常会尝试同时进行大量工作。 IE。在同一个过程中写
min-files
只会使时间加倍。如果是这样:只需在工作结束时准备 'min-files' 即可。直到使用额外的 post-处理器像 linters 和 maby postcss 那样自动添加前缀需要额外的时间……当一次写入最小文件时,这会加倍……JS-Sass-编译器一点都不慢。因此,您可以直接使用原生 SASS 来节省时间。这可能并不漂亮,但在对我有很大帮助的大项目中。如果您可以在此处尝试 link 以了解如何安装:https://sass-lang.com/install
前瞻性思考的想法...