Куча пачек Webpack или один?
У меня есть устаревшая кодовая база с кучей require()
разбросаны по всему проекту. Например, основной модуль приложения выглядит примерно так.
define([
'underscore',
'jquery',
//... another modules
], function(_, $) {
exports.pay = function() {
return new Promise(function(resolve, reject) {
require([
'modules/payment/PaymentModel',
'modules/payment/PaymentView',
], function(PaymentModel, PaymentView) {
PaymentView.getInstance(PaymentModel).getPaid().then(resolve, reject);
});
});
};
})
Или даже с динамическим именованием в середине модулей.
define([/*...*/], function(/*...*/) {
/*...*/
require([
'modules/'+moduleName+'/'+moduleName+'Model',
'modules/'+moduleName+'/'+moduleName+'Collection',
'modules/'+moduleName+'/'+moduleName+'CollectionView'
], function(Model, Collection, CollectionView) {
/*
some code here
*/
});
/*...*/
});
В результате мы получаем медленный проект с файлами до 70-90 js, которые загружаются отдельно. Как вы можете понять, нет никакого упаковщика вообще. Я не знаю идею предыдущего разработчика, но думаю, что это что-то вроде ленивой нагрузки. Моя главная задача - ускорить проект. Поэтому я решил взять Webpack для инкапсуляции всего кода в один пакет. Но во время процесса я столкнулся с множеством проблем, таких как описанная проблема с динамическими нагрузками. Webpack создает около 30 пачек с общим размером около 900 КБ, что составляет 200 КБ после распаковки.
$ find build/ -type f -name '*bundle.js' -exec ls -l {} \; | awk '{total = total + $5}END{print total}'
878054
Как бы вы решили проблему медленного проекта в этом случае? Вы бы использовали Webpack? Если это так, вы бы стремились объединить все файлы JS в один пакет или оставить отдельные пакеты, созданные Webpack, как есть?