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

Question

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

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

有没有其他可能的加速

标签： angular

Answer 1

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

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.

希望这可以帮助。祝一切顺利。