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

【问题标题】：How to Speed up the First time loading time Angular 6 Application如何加快Angular 6应用程序的首次加载时间
【发布时间】：2019-05-27 18:12:07
【问题描述】：

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

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

还有什么可以加快速度的方法

【问题讨论】：

你可以使用延迟加载 - angular.io/guide/lazy-loading-ngmodules

标签： angular

【解决方案1】：

由于您已经使用过 --prod 模式，我知道的下一个最佳选择是：

如果可能，将单个模块拆分为一组较小的功能模块并延迟加载它们。
从 index.html 中删除不必要的脚本和样式并在组件级别加载它。

【讨论】：

我使用了延迟加载，但还是变慢了，我应该从索引文件中删除哪些脚本？

【解决方案2】：

始终使用最新版本的 Angular。进行代码拆分。延迟加载模块会减少您的初始包大小。删除未使用的导入。尽量避免臃肿的第三方库。将功能适当地分离到单独的模块中。

高级：完成上述所有操作后，如果您仍想减小捆绑包大小。尝试使用 bazel 进行构建过程。 https://blog.mgechev.com/2018/11/19/introduction-bazel-typescript-tutorial/

更高级：您仍然想减小捆绑包的大小。等待 Angular Ivy（公开发布）。

【讨论】：

【解决方案3】：

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

1. AOT build.
2. Lazy loading (https://angular.io/guide/lazy-loading-ngmodules)
3. Progressive Web App:
4. Updating Angular and angular-cli: Updating your Angular and angular-cli regularly gives you the benefit of many performance optimizations, bug fixes, new features, security etc.
5. RxJS 6  (RxJS 6 makes the whole library more tree-shakable thereby reducing the final bundle size.)
6. Service worker cache
7. Third party packages (Update to latest versions, if not required remove unnecessary packages)
8. Preload and Prefetch attributes
9. Compressing images and removing unused fonts.

To improve runtime performance: 
1. Learn about how change detection works in angular to Detach Change Detector from some components
2. use trackBy in *ngFor  (If the object reference is broken by updating the content of the object, Angular removes the related DOM node completely and recreate it again even though the actual change required is for only a small part of the DOM node. This issue can be easily solved by using trackBy.)
3.Unsubscribing Observables (To avoid memory leaks)
4. Less global Variables

To Learn More. make a prod build serve the application, open google chrome dev tools, last tab AUDIT, perform a google lighthouse test it would suggest you what can be done to improve the performance of the application.

希望这会有所帮助。万事如意。

【讨论】：

【解决方案4】：

如果您使用 node js 作为中间服务器，只需添加它。

const express = require('express');
const path = require('path');
const compression = require('compression')
const app = express();
app.use(compression())

这样你enableTextCompression

我用这个把时间减少了一半。

【讨论】：