如何在开发环境中提高Webpack的表现？

Question

我该如何提高webpack的构建时间呢？目前我打包了大约150个文件。花了大约15秒(这是太多的时间)。而且大部分时间都被“优化块资产”占用了，这需要大约10秒的时间。有没有办法把这个时间缩短到最多3-4秒。

或者我如何禁用webpack中的优化步骤。我没有显式地使用任何配置来缩小/丑化。

这是我目前使用的配置：：

module.exports = {
context: __dirname,
entry: './js/main.js',
target: 'web',
module: {
    loaders: [
        { test: /text!/, loader: 'raw-loader'},
        { test: /backbone/, loader: 'imports-loader?this=>window' },
        { test: /marionette/, loader: 'imports-loader?this=>window' },
        { test: /sprintf/, loader: 'script-loader' },
        { test: /\.css$/, loader: "style!css" },
        { test: /\.scss$/, loader: 'style!css!sass' },
        { test: /\.js$/, loader: 'jsx-loader?harmony' }
    ]
},
resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
    alias: {
        'text': 'raw'
    }
},
output: {
    filename: 'bundle.js',
    library: 'require',
    libraryTarget: 'this'
},
resolve: {
    alias: alias,
    root: path.join(__dirname, 'node_modules'),
    extensions: ['', '.js', '.jsx']
},
externals: {
    jquery: 'jQuery'
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'root.jQuery': 'jquery',
        'Backbone': 'backbone',
        '_': 'underscore',
        'Marionette': 'marionette',
        'sprintf': 'sprintf'
    })
],
devtool: 'source-map'
};

提前感谢您的帮助。

Answer 1

对于您的构建，您可以进行一些优化。

首先，实际上是通过jsx加载器解析node_modules中的所有文件。您想要排除它们。

loaders: [{ 
    test: /\.js$/, 
    loader: 'jsx-loader?harmony', 
    exclude: /node_modules/, // <---
 }]

其次，您的所有供应商文件(在开发过程中不会更改)在每次文件更改时都会进行编译。这效率不是很高，您应该使用CommonsChunkPlugin将供应商文件与应用程序代码分开。

本质上，您必须添加以下内容：

config.entry = {
  app: './js/main.js',
  vendor: ['react', 'moment', 'react-router', /* etc. all the "big" libs */],
};

config.output = {
  filename: '[name].js', /* will create app.js & vendor.js */
};

config.plugins = [
    /* ... */
    new webpack.optimize.CommonsChunkPlugin(
       /* chunkName= */"vendor", 
       /* filename= */"vendor.bundle.js"
    ),
];

Answer 2

Webpack提供了很多devtools：https://webpack.github.io/docs/configuration.html#devtool你正在使用devtools: 'source-map'。

我更改为devtools: 'cheap-eval-source-map'，块资产优化从4500ms增加到306ms，而使用devtools: 'eval'则减少到1ms。

请注意，这两个文件都不支持生产环境，因为最终的.js文件太大了，在我的例子中是13MB。