Приложение 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 --aot --prod

2: отложенная загрузка

Для использования lazyLoading необходимо выполнить рефакторинг приложения.В Angular Lazyload есть подход для загрузки модулей, когда они необходимы.Поэтому при первой загрузке будет загружаться меньше кода, а затем при переходе пользователя на другие маршруты требуются загруженные файлы чанков. найдите официальный документ для lazyLoading

3: импортируйте то, что вам нужно

Импортируйте только необходимые функции. Например, lodash

Вместо

импорт * как _ из "lodash";

Использование

import {toLower} из "lodash ”;

4: CDN

Используйте CDN (cloudfront / s3) для загрузки ваших активов.

5: Динамическая загрузка скриптов

Не загружайте все скрипты в файле index.html.Вместо этого при необходимости динамически загружайте отдельные компоненты