Разъяснение по связыванию и производительности Webpack Javascript
Я использую Webpack в node.js для компиляции/связки Javascript для статического веб-сайта. Это довольно типичная установка нескольких небольших файлов JS, которые компилируются в один файл «main.js», используемый на моем сайте.
Скажем, мой предварительный пакет Javascript выглядел так:
module-a.js (50 kb)
module-b.js (50 kb)
module-c.js (50 kb)
А мой сайт состоит из 5 страниц;
- Страница 1 использует код только из модуля-а.
- Страница 2 использует код из модуля-а и модуля-б.
- Страница 3 использует код только из модуля-c.
- Страница 4 использует код из всех трех модулей: модуль-а, модуль-б и модуль-с.
- Страница 5 ничего не использует из комплекта.
Насколько я понимаю, в зависимости от того, как Webpack компилирует файл main.js, будут использоваться только ресурсы, необходимые из main.js на постраничной основе, и это окажет какое-либо влияние на производительность. Таким образом, на странице 5 main.js будет невесомым или близким к нему (за исключением HTTP-запроса для main.js), страница 4 испытает на себе «полный» вес пакета, а остальные страницы будут загружаться частями по мере необходимости. .
Я правильно это понимаю? Если так...
- Означает ли это, что очень мало (если вообще есть) преимуществ от наличия нескольких конкретных пакетов, специализированных для самих страниц (например, «main-a.js» для страницы 1, «main-ab.js» для страницы 2 и т. д.)
- Общий размер моего файла «main.js» не имеет большого значения с точки зрения производительности? Таким образом, файл main.js размером 100 КБ или 500 КБ не будет иметь значения для страницы, использующей одни и те же функции? По сравнению, скажем, с файлом CSS, где могут возникнуть проблемы с производительностью, если бы один файл CSS со временем сильно раздувался.
- Есть ли недостатки в объединении всего вашего JS в один файл? Единственное, о чем я могу думать, это о необходимости создания нового пакета для изменения любого отдельного модуля с точки зрения поддержки пакета.
Благодарю вас!