webpack-bundle-analyzer Bundle 报告解读答案

【问题标题】：webpack-bundle-analyzer Interpretation of Bundle Reportwebpack-bundle-analyzer Bundle 报告解读
【发布时间】：2017-06-13 00:06:32
【问题描述】：

我正在尝试了解如何优化使用 Webpack 捆绑的 Angular (4+) 应用程序。我很聪明，可以关注this tutorial，从我的生产构建中生成有用的捆绑报告，但是，我不太明白报告显示的内容。

截图如下：

看起来aws-sdk.js 至少在三个包中被复制，而tinymce.js 的东西在几个单独的包中......这是否意味着我以低效的方式导入第三方 node_modules？

另外，material.es5.js 文件（角度材料设计模块）位于几个模块中......这是怎么回事？确实是把material design module导入到多个lazy-loaded模块中，但我以为Angular是smart enough not to duplicate code？

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

【问题讨论】：

标签： angular webpack angular-cli

【解决方案1】：

报告显示的是，您有一个名为 scripts 的主捆绑包和一些动态生成的较小捆绑包（称为 chunks），您还有一个仅包含 @angular 的 vendor 捆绑包

如果不查看代码、webpack 配置以及您想要实现的目标，真的很难给出这样的答案，但这里有一些可以提供帮助的步骤。

您应该创建一个 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,
    }),

我认为这可能会给您一个良好的开端，帮助您解决一些问题。

【讨论】：