Сборка Angular Production очень велика даже после включения --aot --build-optimizer --sourcemaps = false

Question

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

chunk {common} common.chunk.js (common) 2.18 MB 
chunk {main} main.bundle.js (main) 4.42 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 616 KB [initial]

Я понимаю, что Angular генерирует эти чанки для обработки некоторых внутренних вещей, но почему основной пакет равен 4,5 МБ .

что я делаю не так?

Есть ли способ уменьшить эти размеры?

Answer 1

Я обновил свой проект до Angular v6 .... и я просто не могу поверить, что наш размер буфера уменьшился до 1 МБ с 4 МБ .... Грик-работа от Angular team:)

Answer 2

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

Еще один способ - проанализировать блок с помощью анализатора пакетов веб-пакетов.

В анализаторе пакетов вы можете лучше понять, что оптимизировать и как. Сгенерируйте JSON для производственной сборки (--aot --prod) и выполните анализ с помощью анализатора пакетов.

Кроме того, если вы не обновили все пакеты до последней версии, встряхивание дерева может не работать, поэтому если вы импортируете что-то вроде:

import {Observable} from `rxjs/Rx`

Это может привести к объединению всей библиотеки, возможно, вам придется выполнить определенный импорт, например

import {Observable} from `rxjs/Observable`

Если тряска дерева есть или нет, вероятно, это будет очевидно, если вы изучите свой пакет в анализаторе.

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

Существует также source-map-explorer , который уже упоминается в Angular docs