Webpack 网页包构建时间慢（高级模块优化）

我们很难将我们的项目迁移到webpack，它目前基于requirejs

在用webpack复制当前项目状态的几个星期后，我们遇到了性能问题

我们正在使用网页包版本2.3.3

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

我们的问题是，当我们在watch模式下启动webpack进行开发（或使用webpack dev server）时，每次修改一个文件时，我们都需要等待大约10秒

这是我们的网页开发配置：

{
  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

在这两种情况下，高级模块优化步骤占用了大部分时间。 我不明白为什么在非生产构建中会有一个高级优化，我也不知道为什么要花这么多时间

我想知道是否有任何方法可以更深入地挖掘这一耗时的步骤，以及是否有可能在开发模式中禁用该优化

---

谢谢

我们的团队也有同样的问题。我们已经确定，速度减慢是由于使用了

require.sure

，这为捆绑包提供了动态加载。我们已经在这里标记了这个问题

为了解决这个问题，我的队友找到了一个解决方法，使用babel插件在开发环境中剥离require.sure。它将高级模块优化时间缩短为毫秒。通过改进，我们的连续构建时间从8秒缩短到1.5秒

经过（更多）的挖掘，我们最终发现了一个欺骗webpack的黑客。 在我们的系统中，我们有几十个异步加载的块和几个分散的循环依赖项，这导致许多块有很多父块。 因此，主要的耗时任务是执行内置的RemoveParentModulesPlugin。 因为模块链很长，有很多块，有很多父块，所以这个插件有额外的工作要做

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

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

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 = [];
            });
        });
    });
};

---

对于任何开发具有大量异步路由的大型应用程序的人，您可能需要babel plugin动态导入节点。您可以使用它在开发模式中将导入转换为所需。通过这种方式，区块图非常快，我的增量构建时间从~30秒增加到~3秒

将插件添加到babel.config.js

module.exports = {
  plugins: ['dynamic-import-node']
}

如果您的项目使用了vue cli 3.x，则不需要该插件，只需在根目录下添加一个名为 .env.development，包含以下内容：

VUE_CLI_BABEL_TRANSPILE_MODULES = true

---

谢谢你的小费。这不是我们的情况，但我看到您选择的选项是在开发模式中不使用异步加载。我们正在努力保持这一点，因此我们必须意识到异步性及其可能导致的问题。用于输出计时信息的Webpack CLI标志：

Webpack--progress--profile

我们正在使用angular，是否有方法将其包含在angular构建中？由于angular使用webpack进行构建。是否有此版本的webpack v4？