我试图了解我可以做些什么来优化我使用Webpack捆绑的Angular(4)应用程序.我很聪明,可以按照
this tutorial从我的生产版本生成一个有用的捆绑报告,但是,我不太明白报告给我的内容.
这是一个截图：
看起来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,}),
关于如何解决一些问题,这可能会给你一个良好的开端.
