Angular2 CLI: почему размер пакета --prod меньше, чем --prod --aot?

Я использую последнюю версию angular-cli (beta-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"
  ]
}

webpack angular angular2-aot
person Rob    schedule 23.10.2016    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я ответил на этот вопрос в проблеме на нашем GitHub, но вот мой ответ для справки :

Это может произойти, если вы используете определенные библиотеки, которые не поддерживают AoT (и выпускают пакеты UMD). Причина в том, что мы не можем оптимизировать компоненты, которые являются чистым JavaScript. Это не то, что мы можем исправить с нашей стороны, к сожалению.

Эти библиотеки должны предоставлять модули ES2015 с удаленными декораторами и их компонентами/модулями, уже скомпилированными AoT. Мы работаем над рекомендациями для библиотек, поддерживающих JIT- и AoT-компиляцию.

Кроме того, иногда для некоторых шаблонов размер AoT может быть больше, чем JIT. Версии, сжатые gzip, должны быть наоборот, так как большая часть контента AoT — это одни и те же утверждения, повторяющиеся снова и снова.

Хотя пакет больше, время начальной загрузки должно быть значительно быстрее.

person Hans    schedule 24.10.2016
comment
Это именно тот случай... CLI делает все возможное, чтобы уменьшить размер производственных сборок. Обучение и инструменты для библиотек помогут убедиться, что они следуют передовому опыту. - person Brocco; 24.10.2016

arrow_upward
1
arrow_downward

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

person pe8ter    schedule 23.10.2016
comment
Я не думаю, что это правильно... при использовании AoT компилятор angular не нужно отправлять в браузер вместе с остальной частью пакета, и это приводит к меньшему размеру загрузки фреймворка Angular, потому что компилятор составляет примерно половину самого Angular. согласно официальным документам angular: angular.io /docs/ts/latest/cookbook/aot-compiler.html#!#aot-jit - person Rob; 23.10.2016
comment
@Rob, я думаю, он говорит о шаблонах (т. Е. HTML); а не общий размер файла js. Да, модуль компилятора не нужно доставлять, но «скомпилированные» шаблоны могут быть больше. - person Brad; 06.01.2017