Angular dist 文件很大，导致下载缓慢答案

【问题标题】：Angular dist files huge, causing slow downloadAngular dist 文件很大，导致下载缓慢
【发布时间】：2018-12-04 14:26:10
【问题描述】：

自从将我的 Angular 应用程序升级到版本 5 和版本 6 后，它在浏览器中的下载速度一直非常缓慢，有时需要 30 或 40 秒以上。尽管我正在为生产优化构建 (ng build --prod --build-optimizer --aot)，但核心文件加起来超过了 1 兆字节。

主要的罪犯是

这些文件通常都这么大吗？知道如何减少它们并提高下载速度吗？

【问题讨论】：

很可能，这是由与您的应用捆绑的第三方库引起的。如果可以，请使用“ng 弹出”并获取 webpack 配置。添加 webpack-bundle-analyzer 插件 (npmjs.com/package/webpack-bundle-analyzer) 以找出导致大包大小的第 3 方。然后将其设置为外部脚本引用（最好是 CDN）而不是捆绑包的一部分。
我添加了 webpack-bundle-analyzer 插件。这是输出的屏幕截图：dropbox.com/s/bkdcbg30yct56b5/…。我无法识别任何不应该存在的东西......
我看到了一些您可以分离出来的第三方库（lodash.js、url.js）。你使用的是@angular/cli 还是 webpack？据我所知，如果您可以将供应商捆绑包与应用捆绑包分开，您应该能够将捆绑包大小降低到大约 100Kb (main.js)。
延迟加载模块也会有所帮助。
感谢您的提示。我在package.json 中列出了 angular-cli，并且我正在从命令行构建。这是否意味着我正在使用 angular-cli？我没有意识到这是非此即彼的。我很想将供应商捆绑包与应用捆绑包分开，但我不确定如何。这是ng eject 的用途吗？

【解决方案1】：

原因是您将所有应用程序捆绑在一个模块中。

这意味着你所有的页面、组件、……都将捆绑在一个文件中，它肯定会很重。

这里的解决方案是您应该将您的应用程序分成更小的捆绑包。在Angular 中调用的是module lazy load 并实现preloading(可选) 以减少bundle size 首次加载。

你可以关注这些文章：

或按照以下步骤操作：

为您的页面制作一个模块，它还包括其必要的组件。
此模块的路由
使用loadChildren 在app router 加载此模块。类似的东西：

{ path: 'a', loadChildren: './anynomous/anynomous.module#AnynomousModule' },

【讨论】：

好电话。我确实将大部分内容组合到一个模块中。我按照您链接的教程创建了新模块和新的子路由以进行延迟加载。我现在在 dist 文件夹中看到了 4 个附加文件，例如 1.b06a3b4d3470560595fb.js。但是，下载时间并没有改善，因为我的main.a346bfb6bc1d7f56862f.js 仍然超过 800kb。（实际上它变大了一点。）作为实验，我尝试注释掉app.routing.ts 中的每条路线并尽可能减少app.module.ts，但main.js 文件仍然约为800kb。一定还有其他我想念的东西......
我不确定您的应用场景，但您应该将应用的所有页面、组件分离到相应的模块中。示例：您的第一个页面是登录页面，因此您只需要为login 加载模块only。这将需要几个 kb。而 1.b06a3b4d3470560595fb.js 它称为 chunk，对于通常的应用程序，我们有 ~60 个块，对于大型应用程序，我们有更多。应该模块化我们的应用程序。