登陆页面需要时间加载/显示

Question

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

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-10 s
• vendor.21b3dcaa9a7f0ffad906.bundle.js = 5-6s

这一次我怎么减少呢？目标< 5s。

Answer 1

有几件事你可以做：

启用Gzip如果您的web服务器允许您进行更改，Gzip将压缩bundle.js文件，从而生成更小的文件供下载。

启用AOT --我看到您将其设置为false。你应该启用它。它将预编译您的代码，产生两个主要好处：- js文件中没有角编译器，所以下载量更小-没有在呈现时进行编译，所以呈现速度更快。

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

的好处是:延迟加载模块，因为它只是一个登陆页面，您很可能没有多个模块。但是，如果有一天你这样做了，那是一个很好的做法，只有在需要时才加载模块，以减少启动时间。