#angular #webpack #angular2-aot
#angular #webpack #angular2-aot
Вопрос:
Я использую последнюю версию angular-cli (бета-версия 18) для проекта. Я знаю, что cli все еще находится на очень ранних стадиях, но я озадачен тем, почему мой конечный размер пакета на самом деле меньше, без AoT.
Когда я запускаю ng build --prod , это 1,08 мб:
Asset Size Chunks Chunk Names
main.53d637ff9422b65418e6.bundle.js 1.08 MB 0, 2 [emitted] main
styles.01cffb95000fdb84402c.bundle.js 8.9 kB 1, 2 [emitted] styles
inline.js 1.45 kB 2 [emitted] inline
main.53d637ff9422b65418e6.bundle.map 7.24 MB 0, 2 [emitted] main
styles.01cffb95000fdb84402c.bundle.map 40.3 kB 1, 2 [emitted] styles
inline.d41d8cd98f00b204e980.bundle.map 13.5 kB 2 [emitted] inline
main.53d637ff9422b65418e6.bundle.js.gz 236 kB [emitted]
index.html 907 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
favicon.ico 5.43 kB [emitted]
Когда я запускаю ng build --prod --aot , это 1,26 мб.
Asset Size Chunks Chunk Names
styles.01cffb95000fdb84402c.bundle.map 40.3 kB 1, 2 [emitted] styles
0.688d48f52a362bd543fc.bundle.map 2.94 kB [emitted]
styles.01cffb95000fdb84402c.bundle.js 8.9 kB 1, 2 [emitted] styles
inline.js 1.45 kB 2 [emitted] inline
main.6490041404a193461c3c.bundle.map 6.81 MB 0, 2 [emitted] main
main.6490041404a193461c3c.bundle.js 1.26 MB 0, 2 [emitted] main
inline.d41d8cd98f00b204e980.bundle.map 13.5 kB 2 [emitted] inline
main.6490041404a193461c3c.bundle.js.gz 223 kB [emitted]
index.html 907 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
favicon.ico 5.43 kB [emitted]
Для tsconfig выглядит как:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es6",
"dom"
],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
},
"exclude": [
"**/*.spec.ts"
]
}
Ответ №1:
Я ответил на этот вопрос на нашем GitHub, но вот мой ответ для справки:
Если вы используете определенные библиотеки, которые не поддерживают AoT (и выпускают пакеты UMD), это может произойти. Причина в том, что мы не можем оптимизировать компоненты, которые являются чистым JavaScript. К сожалению, это не то, что мы можем исправить на нашей стороне.
Эти библиотеки должны предоставлять модули ES2015 с удаленными декораторами, а их компоненты / модули уже AoT скомпилированы. Мы работаем над рекомендациями для библиотек для поддержки компиляции как JIT, так и AoT.
Кроме того, иногда в некоторых шаблонах размер AoT может быть больше, чем JIT. Сжатые версии должны быть наоборот, поскольку большая часть содержимого AoT — это одни и те же инструкции, повторяющиеся снова и снова.
Хотя пакет больше, время начальной загрузки должно быть значительно быстрее.
Комментарии:
1. Это именно тот случай… CLI прилагает все усилия, чтобы уменьшить размер производственных сборок. Обучение и инструментарий для библиотек помогут убедиться, что они следуют лучшим практикам.
Ответ №2:
Сгенерированный шаблон JavaScript намного больше, чем сам шаблон. Это компромисс между размером файла и временем выполнения.
Комментарии:
1. Я не думаю, что это правильно … при использовании AoT компилятор angular не нужно загружать в браузер вместе с остальной частью пакета, и это приводит к «меньшему размеру загрузки Angular framework», потому что «компилятор составляет примерно половину самого Angular» согласно официальным документам angular: angular.io/docs/ts/latest/cookbook/aot-compiler.html #!#aot-jit
2. @Rob, я думаю, он говорит о шаблонах (то есть HTML), а не об общем размере файла js. Да, модуль компилятора не обязательно отправлять, но «скомпилированные» шаблоны могут быть больше.