到达网页需要时间来载入/显示

Question

我构建了一个Angular应用程序。 我正在使用以下命令构建项目：

ng build --env=staging --target=production --aot=false

结果：

Hash: 7e7b9c4eecc155819498
Time: 111448ms
chunk {0} polyfills.149a820f76eebb0aa731.bundle.js (polyfills) 65.9 kB [initial] [rendered]
chunk {1} main.446a848fec514fd227a0.bundle.js (main) 1.19 MB [initial] [rendered]
chunk {2} styles.764f989c6e8171fc8bab.bundle.css (styles) 127 kB [initial] [rendered]
chunk {3} vendor.21b3dcaa9a7f0ffad906.bundle.js (vendor) 3.16 MB [initial] [rendered]
chunk {4} inline.0c2d7dbea7a8d2a649ad.bundle.js (inline) 1.45 kB [entry] [rendered]

问题是，当我在服务器上部署应用程序并加载/命中主页URL时，显示时间为17-18s。 我检查了网络标签。 以下是需要花费时间的两个主要方面：

• main.446a848fec514fd227a0.bundle.js = 9-10s

• vendor.21b3dcaa9a7f0ffad906.bundle.js = vendor.21b3dcaa9a7f0ffad906.bundle.js

我该如何减少时间？ 目标是<5秒。

Answer 1

您可以做几件事：

启用Gzip如果您的Web服务器允许您进行更改，则Gzip将已经压缩bundle.js文件，从而可以下载较小的文件

启用AOT我看到您将其设置为false。 您应该启用它。 它将预编译您的代码，从而带来两个主要好处：-js文件中没有Angular编译器，因此下载量较小-渲染时无需进行编译，因此渲染速度更快

-prod选项 -prod选项在构建时会摇晃您的代码。 它将删除源代码和库代码中未使用的部分，从而再次生成较小的bundle.js文件。

奖励：延迟加载模块由于这只是一个登录页面，因此您很可能没有多个模块。 但是，如果有一天，那么最好仅在需要时才加载模块以减少启动时间，这是一个好习惯。