Как уменьшить размер пакета main. js (начальная загрузка) в Angular?

Question

Я использую Angular 7, и это система ERP. Он имеет около 150 компонентов. Начальное время загрузки страницы сайта довольно длительное. Я использовал webpack-bundle-analyzer для анализа размера пакета main. js. Это размер 700 КБ. Я использовал такие стратегии, как отложенная загрузка, предварительная загрузка модулей и файлов. Я хочу поместить размер main. js (начальная загрузка) в пределах 250KB-300KB. Является ли это возможным? Если да, то какие подходы я могу использовать?

Я дал изображение анализатора, полученное из webpack-bundle-analyzer.

Answer 1

Попробуйте перейти к Angular 9, его новый движок рендеринга под названием Ivy генерирует меньшие пакеты, и он обратно совместим, поэтому ваш код не должен сильно меняться.

Кроме того, в main.js compiler.js встроен, что означает, что вы, вероятно, не собираете в производственном режиме (вы компилируете «вовремя», а не «заблаговременно»).

Наконец, вы загружаете большие библиотеки, такие как xlsx. js, jszip. js и cpexcel. js. Перемещение этих библиотек в ленивые модули поможет уменьшить размер main.js. Если они вам нужны на самых первых страницах приложения, то, я думаю, вы не сможете сделать намного больше.