Webpack 的性能问题

Question

我正在尝试将 sass 构建切换到 Webpack 以消除 gulp(并维护更少的工具)。

webpack 中的 JS 构建速度很快，我对此没有问题。

我的 gulp scss 构建也非常快，只需不到一秒钟。

gulp.task('css', function(){
return gulp.src('styles/main.scss')
.pipe(sass({ outputStyle: "compressed" }).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['> 0%'],
cascade: false
}))
.pipe(gulp.dest('public/css'));
});

但是，我尝试在 Webpack 中重新实现相同的内容，我需要 10 秒，第一次构建，还有观看过程！

这是 webpack 代码：

{
entry: {
app: path.resolve(__dirname, 'styles/main.scss'),
// vendor: ['vendor'],
},
output: {
path: path.resolve(__dirname,'./public/css'),
filename: 'main.css'
},
devtool: "inline-eval-cheap-source-map",
module: {
loaders: [
{
test: /.css$/,
loaders: ['postcss-loader', 'resolve-url-loader']
},
{
test: /.scss$/,
loaders: ['css-loader', 'postcss-loader', 'resolve-url', 'sass-loader?sourceMap']
},
{
test: /.(ttf|eot|svg|png|jpg|woff2|woff|jpeg|gif)(?v=[0-9].[0-9].[0-9])?$/,
loader: 'ignore-loader' // old: 'file-loader'
}
],
},
postcss: [ autoprefixer({
browsers: ['> 0%'], // ['last 2 versions'],
cascade: false
})
}];

为什么这个过程慢了 10 倍？我能做些什么来加快速度？谢谢！

Answer 1

加载器将应用于您在应用内导入的所有模块，其中一些可能是node_modules文件夹中的npm 包。

尝试使用exclude属性排除这些包，如下所示：

module.exports = {
// ...
{
test: /.css$/,
loaders: ['postcss-loader', 'resolve-url-loader'],
exclude: /node_modules/
},
{
test: /.scss$/,
loaders: ['css-loader', 'postcss-loader', 'resolve-url', 'sass-loader?sourceMap'],
exclude: /node_modules/
},
{
test: /.(ttf|eot|svg|png|jpg|woff2|woff|jpeg|gif)(?v=[0-9].[0-9].[0-9])?$/,
loader: 'ignore-loader', // old: 'file-loader'
exclude: /node_modules/
}
// ...
}

或者，您可以使用include仅将这些加载程序应用于styles文件夹中的文件。

Answer 2

我通过删除sass-loader和resolve-url-loader并使用快速加载器解决了我的问题。

我的重建时间从 4-6 秒缩短到 ~700 毫秒。