Question

在最终部署文件超过8 Mb之后，我已经完全在单个模块中创建了Angular Application，因此对于第一次加载时间来说太慢了，

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

还有没有其他可能加快速度

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.

希望这会有所帮助。祝一切顺利。

Answer 2

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

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

Answer 3

始终使用最新版本的angular。进行代码拆分。延迟加载模块会减少您的初始捆绑包大小。删除未使用的进口。尽量避免肿的第三方库。将功能正确地隔离到单独的模块中。

高级：完成以上所有操作后，如果您仍想减小套装尺寸。尝试使用bazel进行构建。 https://blog.mgechev.com/2018/11/19/introduction-bazel-typescript-tutorial/

更多高级功能：您仍然想减小套装尺寸。等待Angular Ivy（公开发布）。

Answer 4

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

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

通过这种方式 enableTextCompression

我通过使用它减少了一半的时间。

如何加快首次加载时间Angular 6应用

4 个答案: