Различия между ng build и ng build --watch - PullRequest
Новая
       57

Различия между ng build и ng build --watch

0 голосов
/ 02 июля 2019

Я обновил свое приложение Angular до Angular 8, и теперь я хочу попробовать «Дифференциальная загрузка». В tsconfig.json для target установлено значение es2015.

Теперь, если я создаю приложение, используя ng build, я получаю следующий вывод из Angular-CLI: 

Date: 2019-07-02T15:50:56.861Z
Hash: 33c0be7176e97a0b4271
Time: 35935ms
chunk {main} main-es5.js, main-es5.js.map (main) 3.3 MB [initial] [rendered]
chunk {polyfills} polyfills-es5.js, polyfills-es5.js.map (polyfills) 762 kB [initial] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 104 kB [entry] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 30.5 kB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.84 MB [initial] [rendered]

Date: 2019-07-02T15:51:25.559Z
Hash: dbbb4a6cfe77900eb200
Time: 28589ms
chunk {main} main-es2015.js, main-es2015.js.map (main) 2.92 MB [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 378 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 104 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 30.5 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 4.74 MB [initial] [rendered]

Если я создаю приложение, используя ng build --watch (те же пакеты, что и ng serve), я получаю следующий вывод: 

Date: 2019-07-02T15:55:06.631Z
Hash: 123299dcdc0cbcb1c386
Time: 36614ms
chunk {main} main.js, main.js.map (main) 2.92 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 375 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 503 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 104 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 30.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.74 MB [initial] [rendered]

Почему не генерируются одинаковые пакеты? Я спрашиваю об этом, потому что я не знаю, как правильно вставить этот скрипт в html -файлы.

Ответы [ 3 ]

1 голос
/ 02 июля 2019

Как вы упомянули, Angular 8 предоставляет новую дифференциальную нагрузку . Теперь ng build создает 2 версии каждого пакета JS. Старый синтаксис ES5 и новая современная версия ES2015 (модуль JS), оптимизированная для последних версий браузеров.

Почему 2 версии? Потому что старый браузер будет игнорировать пакеты ES2015, а просто загружать и запускать «старые». (помечено как nomodule).

Вам следует рассмотреть возможность использования ng serve в режиме разработки, сборка будет оптимизирована для этого, будет сгенерировано меньше файлов (больше не ES5 + ES2015). И ng build --prod для развертывания.

Более подробную информацию вы можете прочитать в Официальные документы Angular

Также для тех, кто обнаружит эту новую функцию: Версия 8 Angular - Меньшие связки, API-интерфейсы CLI и согласование с экосистемой от Стивена Флуина.

Вы можете отказаться от этого изменения, установив целевое значение обратно на es5 в вашем tsconfig.json

{
 ...
 "compilerOptions": {
     "target": "es5"
  }
}
0 голосов
/ 06 июля 2019

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

Из-за функции Дифференциальная загрузка ,Angular 8 выпускает пакеты для устаревших браузеров (пакеты ES5) и современных браузеров (пакеты ES2015).Если эти пакеты сгенерированы, зависит от ваших настроек в tsconfig.json (как вы упомянули) и browserslist файла.
Подробности см. В документации .

Я короток,свойство target в tsconfig.json определяет верхнюю границу, которая должна поддерживаться (только es2015 на данный момент), а конфигурация в файле browserslist определяет нижнюю границу.Исходя из этой информации и выбранного метода запуска кода (ng serve / ng build / ...), CLI определяет, какие пакеты создавать.

В вашем случае для ng build --watch он такой же, как дляng serve, только ES2015-пакет производится из соображений производительности и для облегчения отладки.

Я не знаю, как правильно внедрить эти сценарии в html-файлы.

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

  • <script src="...-es5.js" nomodule></script>
    Это будет использоваться только устаревшими браузерами из-за'nomodule' attriubte.
  • <script src="...-es2015.js" type="module"></script>
    Это будет использоваться только современными браузерами из-за атрибута type="modlue"
0 голосов
/ 02 июля 2019

Вы можете использовать предложение --watch, если вам нужно перестроить угловой код при изменении файла.

Из документации :

--watch=true|false Запускать сборку при изменении файлов. По умолчанию: false

...