Angular 8 загружает ресурсы приложения в два раза - PullRequest
0 голосов
/ 30 октября 2019

У меня есть приложение ng 8, доступное (https://anyteam.work/en/), если вы любезно осмотрите вкладку сети, угловой запрос дважды! Файлы имеют размер 4 Мб, но так как они были вызваны дважды, загрузка моей страницы почти9mb !!! и еще одна вещь, когда мое приложение было в angular 7, размер моего пакета был 3mb, после изменения в angular 8 размер пакета того же кода стал 3.5mb, мне было интересно, что этот дополнительный размер пакета 500k из-за новыхверсия фреймворка, или, как мои журналы пряжи недооценивают некоторые пакеты, имеющие некорректную зависимость от сверстников для некоторых более старых версий, более старые зависимости также объединяются?

angular 8 loads application assets twice

содержимое файла index.html составляет

<!DOCTYPE html>
<html lang="{0}" dir="{1}" data-debug="{2}" data-user-id="{3}">
  <head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      name="viewport"
    />
    <link
      data-do-not-remove-me="true"
      href="/assets/bootstrap/bootstrap.{1}.min.css"
      rel="stylesheet"
    />
    <link
      data-do-not-remove-me="true"
      href="/assets/styles/loader.css"
      rel="stylesheet"
    />
    <link
      data-do-not-remove-me="true"
      href="/assets/pwa/favicon.ico"
      rel="icon"
      type="image/x-icon"
    />
    <title>Any Team | achasoft.com</title>
  </head>
  <body>
    <div id="app-loading-container" class="waiting-container full-screen">
      <span class="waiting-spinner"></span>
    </div>
    <app-panel-root></app-panel-root>
    <script
      data-do-not-remove-me="true"
      type="text/javascript"
      src="/{0}/dynamics/translates"
    ></script>
    <script
      data-do-not-remove-me="true"
      type="text/javascript"
      src="/{0}/dynamics/enums"
    ></script>
  </body>
</html>

частичное содержимое angular.json

{
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "projects/main",
      "sourceRoot": "projects/main/src",
      "prefix": "app-main",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../backend/AchaApplication.Web/wwwroot/app/main",
            "index": "projects/main/src/index.html",
            "main": "projects/main/src/main.ts",
            "polyfills": "projects/main/src/polyfills.ts",
            "tsConfig": "projects/main/tsconfig.app.json",
            "assets": [
              "projects/main/src/favicon.ico",
              "projects/main/src/assets"
            ],
            "styles": [
              "projects/main/src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/main/src/environments/environment.ts",
                  "with": "projects/main/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "main:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "main:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "main:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/main/src/test.ts",
            "polyfills": "projects/main/src/polyfills.ts",
            "tsConfig": "projects/main/tsconfig.spec.json",
            "karmaConfig": "projects/main/karma.conf.js",
            "assets": [
              "projects/main/src/favicon.ico",
              "projects/main/src/assets"
            ],
            "styles": [
              "projects/main/src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/main/tsconfig.app.json",
              "projects/main/tsconfig.spec.json",
              "projects/main/e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/main/e2e/protractor.conf.js",
            "devServerTarget": "main:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "main:serve:production"
            }
          }
        }
      }
    }

Ответы [ 3 ]

1 голос
/ 30 октября 2019

Это потому, что новая функция, представленная в Angular 8, называется Дифференциальная нагрузка .

Дифференциальная загрузка - это стратегия, в которой интерфейс командной строки создает два отдельных пакета как часть развернутого приложения.

  • Первый пакет содержит современный синтаксис ES2015, использует преимущества встроенной поддержки в современных браузерах, обеспечивает меньшее количество полизаполнений и приводит к меньшему размеру пакета.

    Второй пакет содержит код в старом синтаксисе ES5 вместе со всеми необходимыми полизаполнениями. Это приводит к увеличению размера пакета, но поддерживает старые браузеры.

Эта стратегия позволяет вам продолжать создавать веб-приложение для поддержки нескольких браузеров, но загружать только тот код, который необходим браузеруНужны.

Настройка дифференциальной нагрузки

Дифференциальная загрузка поддерживается по умолчанию в версии 8 и более поздних версиях Angular CLI. Для каждого проекта приложения в вашей рабочей области вы можете настроить способ создания сборок на основе списка браузеров и файлов tsconfig.json в вашем проекте приложения.

Подробнее см. здесь .

Отказ от дифференциальной загрузки

Дифференциальную загрузку можно явно отключить, если она вызывает непредвиденные проблемы или вам необходимо настроить ES5 специально для поддержки устаревшего браузера.

Комуявное отключение дифференциальной загрузки:

  • Включите мертвые или браузеры IE в файле конфигурации browserslist, удалив перед ними ключевое слово not. Установите для цели compilerOptions значение es5.

. Эти сведения приведены в угловых документах, для получения более подробной информации см. здесь

0 голосов
/ 30 октября 2019

Я нашел решение, просто установил "target": "es5" в tsconfig.json, чтобы предотвратить дифференциальную загрузку, так как размеры пакета не сильно отличаются, макс. 50K :)) Зачем беспокоиться? и это экономит много времени на сборку:)

0 голосов
/ 30 октября 2019

Это потому, что Angular дважды включил эти js-файлы в ваш index.html (из сборки):

<script type="text/javascript" src="/app/main/runtime-es2015.de1f101ad38d40b1418d.js" type="module"></script>
<script type="text/javascript" src="/app/main/polyfills-es2015.e3505a8f9c19cc7a7967.js" type="module"></script>
<script type="text/javascript" src="/app/main/runtime-es5.d7d539b89689d64f8db9.js" nomodule defer></script>
<script type="text/javascript" src="/app/main/polyfills-es5.91173d90822cf6a32960.js" nomodule defer></script>
<script type="text/javascript" src="/app/main/main-es2015.bc80883a8d28e00c9ba5.js" type="module"></script>
<script type="text/javascript" src="/app/main/main-es5.55a8f5a8cbe64028a46a.js" nomodule defer></script>

И для размера вы должны использовать aot компилятор:

ng build --prod --aot
...