着陆页需要时间来加载/显示

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-18秒才能显示。我检查了网络选项卡。以下是需要时间的两件主要事项：

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

• vendor.21b3dcaa9a7f0ffad906.bundle.js = 5-6s

我怎样才能减少这段时间？目标是＆lt; 5S

Answer 1

您可以做几件事：

启用Gzip 如果您的Web服务器允许您进行更改，Gzip将已压缩bundle.js文件，导致下载较小的文件

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

-prod选项 构建时的 -prod 选项会破坏您的代码。它将删除源代码和库代码的未使用部分，再次导致较小的bundle.js文件。

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