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个secondes，第一个构建，而且手表的过程！

这里是的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并使用fast-sass-loader解决了我的问题。

我的重建时间从4-6秒到约700毫秒。