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

发布时间：2020-12-17 16:59:57 所属栏目：安全来源：网络整理

导读：我试图了解我可以做些什么来优化我使用Webpack捆绑的Angular(4)应用程序.我很聪明,可以按照 this tutorial从我的生产版本生成一个有用的捆绑报告,但是,我不太明白报告给我的内容. 这是一个截图：看起来aws-sdk.js在至少三个包中被复制了,而tinymce.js的东西

我试图了解我可以做些什么来优化我使用Webpack捆绑的Angular(4)应用程序.我很聪明,可以按照 this tutorial从我的生产版本生成一个有用的捆绑报告,但是,我不太明白报告给我的内容.

这是一个截图：

enter image description here

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

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

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

解决方法

报告显示的是你有一个名为scripts& amp;少数动态生成的较小的bundle(称为chunk)也有一个只包含@angular的供应商包

没有看到代码,webpack配置和放大器,很难给出这样的答案.你想要实现什么,但这里有一些可以帮助的步骤.

您应该创建一个包含所有主要依赖项的供应商包,例如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,}),

关于如何解决一些问题,这可能会给你一个良好的开端.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!