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

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

我怎样才能减少这个时间？目标是

Answer 1

你可以做几件事：

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

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

-prod 选项 构建时的 -prod 选项将摇树你的代码。它将删除源代码和库代码的未使用部分，再次导致更小的 bundle.js 文件。

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