Я работаю над проектом, который состоит из одного основного приложения, общей библиотеки компонентов, общей «основной» библиотеки и (в настоящее время) 5 дополнительных приложений.
Излишне говорить, что у него тяжелый случай раздувания пакета, и я не думаю, что он один. В результате того, что мы полагаемся на webpack для объединения наших приложений в один блок (я не жалуюсь, модули ES6 - прекрасная вещь, которую, как мне кажется, может подтвердить любой опытный JS-разработчик), размер нашего пакета превысил 16 МБ. Это вызвало начальное время загрузки более 10 секунд, и в это время пользователю отображался белый экран.
Очевидно, что единый пакет подходит для небольших приложений, а веб-пакет упрощает объединение фрагментов. Мы не использовали webpack в полной мере. Но, в то же время, есть шаги, которые вы можете предпринять, чтобы уменьшить размер вашего приложения, что поможет частично избавиться от этого размера. Разделение на кусочки - это просто решение изоленты для толстого пучка.
Введите: webpack-bundle-analyzer. Этот модуль NPM - потрясающее благословение. Это помогло мне представить себе, в чем заключаются наши проблемы. Почему импортируется вся Ramda, когда мы используем только 10 функций? Сколько мест в моменте ?!
Он не только выявляет ошибки, но и помогает их исправить. Используя анализатор, я начал работать над пакетным разбиением нашего приложения. Внося изменения на основе рекомендаций из интернета, я мог видеть, как это повлияло на нашу сборку. Что, если я изменил свойство minChunks нашего CommonsChunkPlugin с 2 на 3? Что, если я создам чанк поставщика?
Не поймите меня неправильно, это не волшебная палочка, которая сделает всю работу за вас. Чтобы уменьшить размер пакета, необходимо приложить немало усилий, чтобы найти правильную комбинацию плагинов, блоков и т. Д., Но этот плагин действительно помогает определить, на что можно направить эти усилия, чтобы получить максимальную отдачу от затраченного времени.
