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

Question

Angular 5 application where it take more time while first time loading application at any server and for more information I use AOT compiler for production.

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

There are some ways by which you can optimize the first load.

1: Build Options

ng build --prod

2: Lazy Loading

You should refactor your application to use lazyLoading. In Angular lazyload is the approach to load modules when needed. So less code will be loaded on the first load and then when the user moves to other routes required chunk files will be loaded. find the official doc for lazyLoading

3: Import what you need

Import only needed functions. e.g lodash

Instead of

import * as _ from "lodash";

Use

import { toLower } from “lodash”;

4: CDN

Make use of CDN(CloudFront/s3) to load your assets(static files).

5: Dynamic Script loading

Do not load all script in the index.html file. Instead, load dynamically in individually component when needed