angular - 如何加快 Angular 6 应用程序的首次加载时间

Question

我完全在单个模块中创建了 Angular 应用程序，最终部署文件超过 8 Mb，所以第一次加载时间太慢，

我已经尝试使用 --prod 现在文件大小约为 5MB

有没有其他方法可以加速

Answer 1

您可以执行许多操作来提高性能并减少应用程序的初始负载。

1. AOT 构建。
2. 延迟加载 ( https://angular.io/guide/lazy-loading-ngmodules )
3. 渐进式网络应用:
4. 更新 Angular 和 angular-cli:定期更新 Angular 和 angular-cli 可为您带来许多性能优化、错误修复、新功能、安全性等好处。
5. RxJS 6(RxJS 6 使整个库更易于摇树优化，从而减少了最终包的大小。)
6. 服务 worker 缓存
7. 第三方包(更新到最新版本，如果不需要删除不必要的包)
8. 预加载和预取属性
9. 压缩图像并删除未使用的字体。

提高运行时性能:

1. 了解 Angular 中的变更检测如何从某些组件中分离变更检测器
2. 在 *ngFor 中使用 trackBy(如果通过更新对象的内容破坏了对象引用，Angular 会完全删除相关的 DOM 节点并重新创建它，即使所需的实际更改只是 DOM 节点的一小部分.这个问题可以通过trackBy轻松解决。)
3. 取消订阅 Observables(避免内存泄漏)
4. 更少的全局变量

要了解更多信息，请为应用程序构建产品，打开 google chrome 开发工具，最后一个选项卡 AUDIT，执行 google lighthouse 测试。它将建议可以采取哪些措施来提高应用程序的性能。