webpack-bundle-analyzer对捆绑报告的解释

Question

我试图了解我可以做些什么来优化我使用Webpack捆绑的Angular（4+）应用程序。我很聪明，可以按照this tutorial从我的生产版本生成一个有用的捆绑报告，但是，我不太清楚报告向我展示了什么。

以下是截图：

看起来aws-sdk.js在至少三个捆绑包中被复制，tinymce.js内容在几个单独的捆绑包中...这是否意味着我正在导入第三方node_modules效率低下的方式？

此外，material.es5.js文件（角度材料设计模块）在几个模块中......具体是什么？确实，我将材质设计模块导入多个延迟加载的模块，但我认为Angular是smart enough not to duplicate code？

非常感谢任何建议或见解。

Answer 1

报告显示的是您有一个名为scripts＆amp;的主要捆绑包。少数动态生成的较小的包（称为chunks）也有一个vendor包，其中只包含@angular

很难在不看代码的情况下给出这样的答案，webpack配置＆amp;你想要达到的目标是什么，但这里有一些可以提供帮助的步骤。

您应该创建一个vendor捆绑包，其中包含所有主要依赖项，例如tinymce，angular，aws-sdk，material.es5等...最有可能不会改变很多，所以你可以让浏览器缓存这个包。为此，您需要添加一个额外的条目，如此

    entry: {
       scripts: 'path/to/scripts.js',
       vendor: [
          'tinymce',
          '@angular',
          'aws-sdk',
          etc...
       ],
    },

您还需要CommonChunksPlugin这样的

    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor'],
      minChunks: Infinity,
    }),

对于如何解决一些问题，这可能会给你一个良好的开端。