Angular 5 应用程序第一次加载需要很长时间，我需要帮助加快速度

Question

Angular 5 个应用程序，第一次在任何服务器上加载应用程序需要更多时间，有关更多信息，我使用 AOT 编译器进行生产。

tsconfig.json

 {
      "compileOnSave": false,
      "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "baseUrl": "src",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2017", "dom"]
      }
    }

Answer 1

有一些方法可以优化第一次加载。

1：构建选项

ng build --prod

2：延迟加载

您应该重构您的应用程序以使用惰性加载。在 Angular 中，lazyload 是在需要时加载模块的方法。因此，第一次加载时将加载更少的代码，然后当用户移动到其他路线时，将加载所需的块文件。 find the official doc for lazyLoading

3:导入你需要的

Import only needed functions. e.g lodash

而不是

从“lodash”导入 * as _;

使用

import { toLower } from “lodash”;

4：CDN

利用 CDN(CloudFront/s3) 加载您的资产（静态文件）。

5: 动态脚本加载

不要加载 index.html 文件中的所有脚本。相反，动态加载需要时单独组件

Angular 5 应用程序第一次加载需要很长时间，我需要帮助加快速度

Angular 5 application takes a long time to load for first time users, I need help to speed it up

performance

angular5