webpack - webpack 构建时间缓慢(高级模块优化)

Question

我们在尝试迁移到 webpack 项目时遇到了困难，该项目目前基于 requirejs。

在尝试使用 webpack 复制当前项目状态几周后，我们遇到了性能问题。

我们使用的是 webpack 版本 2.3.3。

目前我们有 240 个模块和 58 个 block 。

我们的问题是，当我们以watch模式启动webpack进行开发(或使用webpack-dev-server)时，每次修改文件时，我们都必须等待大约10秒。

这是我们的 webpack 开发配置:

{
  context: path.resolve(__dirname),

  entry: {
      'app-std': [
        'main',
        'plugins/base-component',
        'controllers/base-controller',
        'widgets/base-widget',
        'usertiming'
      ]
  },

  output: {
    path: path.resolve('./dist/js'),
    filename: '[name].js',
    publicPath: '/js/'
  },

  resolve: {
    modules: ['public/js', 'node_modules'],
    alias: {
        'uuid': path.resolve(__dirname, 'public/vendor/uuid.js/dist/uuid.core.js'),
        'jsLogger': 'js-logger',
        'jqueryCookie': 'js-cookie',
        'jqueryValidation': path.resolve(__dirname, 'node_modules/jquery-validation/dist/jquery.validate.js'),
        'jQueryXDomainRequest': 'jquery-ajax-transport-xdomainrequest',
        'dust': 'dustjs-linkedin',
        'dust.core': 'dustjs-linkedin',
        'dustHelpers': 'dustjs-helpers',
        'bootstrapSelect': 'bootstrap-select',
        'bootstrapDropDown': path.resolve(__dirname, 'node_modules/bootstrap/js/dropdown.js')
    }
  },

module: {

    rules: [            
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /(node_modules)/,
            options: {
                presets: [['es2015', { modules: false }]/*, 'react'*/],
                plugins: ['syntax-dynamic-import'],
                cacheDirectory: true
            }
        }
    ]
},

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('local')
        }
    }),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],

devtool: 'cheap-module-eval-source-map',

devServer = {
    https: true,
    port: 7070,
    host: '0.0.0.0',
    headers: { 'Access-Control-Allow-Origin': '*' }
},

stats: {
    chunks: true,
    chunkModules: true,
    modules: true
}

}

这些是初始构建的统计数据:

6185ms building modules
65ms sealing
2ms optimizing
1ms basic module optimization
12ms module optimization
7906ms advanced module optimization
1ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
12ms module reviving
2ms module order optimization
3ms module id optimization
2ms chunk reviving
6ms chunk order optimization
9ms chunk id optimization
22ms hashing
0ms module assets processing
214ms chunk assets processing
2ms additional chunk assets processing
1ms recording
0ms additional asset processing
0ms chunk asset optimization
2ms asset optimization
192ms emitting

如果我们修改其中一个模块，webpack 会触发重建，我们会得到以下数字:

38ms building modules
38ms sealing
1ms optimizing
1ms basic module optimization
1ms module optimization
7470ms advanced module optimization
1ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
3ms module reviving
0ms module order optimization
4ms module id optimization
3ms chunk reviving
1ms chunk order optimization
4ms chunk id optimization
14ms hashing
0ms module assets processing
1ms chunk assets processing
1ms additional chunk assets processing
0ms recording
0ms additional asset processing
1ms chunk asset optimization
0ms asset optimization
1ms emitting

在这两种情况下，高级模块优化步骤消耗了大部分时间。我不明白为什么在非生产版本中有高级优化，而且我也不知道为什么要花这么多时间。

我想知道是否有任何方法可以更深入地研究这个耗时的步骤，以及是否可以在开发模式下禁用该优化。

谢谢!

Answer 1

经过一些(更多)挖掘，我们最终得到了一个欺骗 webpack 的hack。在我们的系统中，我们有数十个异步加载的 block 和几个分散的循环依赖项，这导致很多 block 有很多父项。因此，主要耗时的任务是执行内置的RemoveParentModulesPlugin。由于模块链很长，许多 block 有许多父级，因此该插件需要做额外的工作。

我们的解决方案是(仅在开发模式下)添加一个新的自定义插件，该插件删除每个模块的父模块，因为在本地计算机中运行应用程序时我们不需要这种优化。

这是我们自定义插件的代码，以防将来有人发现它有用:

function AvoidParentModulesOptimizationPlugin() {}
AvoidParentModulesOptimizationPlugin.prototype.apply = function(compiler) {
    compiler.plugin('compilation', function(compilation) {
        compilation.plugin(["optimize-chunks-basic", "optimize-extracted-chunks-basic"], function(chunks) {
            // We cheat webpack to think there are no parents to optimize
            // so recompilation time is quite low on development mode
            chunks.forEach(function(chunk) {
                chunk.parents = [];
            });
        });
    });
};