Что делают эти angular-cli: inline.bundle.js, vendor.bundle.js, main.bundle.js?

Если я проверю файл index.html проекта angular 2, созданного с помощью angular-cli, я увижу, что страница содержит только 3 файла из папки dist:

inline.bundle.js
vendor.bundle.js
main.bundle.js

Но теперь я пытаюсь понять, что делает каждый файл. Я написал компонент с angular-cli, у меня понижение, чтобы я мог использовать его в другом приложении, написанном с angular 1. Если я просто добавлю эти 3 файла в мой index.html, плюс добавлю файл app.module.ts, мне кажется, что я обновить мое приложение, и все работает. Я пытаюсь понять, почему, потому что учебник Google Angular не говорит об Angular-Cli и как он может помочь с миграцией.

ОТВЕТЫ

Ответ 1

Посмотрим:

inline.bundle.js

Это загрузчик веб-пакетов. Крошечный файл с утилитами Webpack, которые необходимы при загрузке других файлов.

В конце концов это будет записано внутри самого файла index.html и не будет генерироваться как отдельный файл вообще.

vendor.bundle.js

Это генерируется по умолчанию в режиме dev и игнорируется по умолчанию в режиме prod (ng build -prod или ng serve -prod).

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

Типичный подход Angular состоит в том, чтобы объединить их в основной пакет, и при этом запустить Webpack tree-shaking, который удаляет любые модули EcmaScript/TypeScript, которые никогда не были импортированы из других модулей вашего приложения и его импорт. Это означает, что последний пакет намного меньше. Например, при компиляторе Ahead времени (AoT) компилятор Angular получает древовидную структуру.

Вы можете явно управлять созданием отдельного пакета поставщиков или нет, установив аргумент --vendor-chunk.

main.bundle.js

Ваш собственный код и все, что вы импортировали и т.д., как объяснялось в предыдущем пункте.