У меня есть устаревшая кодовая база с кучей 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 КБ после gzipping.
$ find build/ -type f -name '*bundle.js' -exec ls -l {} \; | awk '{total = total + $5}END{print total}'
878054
Как бы вы решили проблему медленного проекта в этом случае?Вы бы использовали Webpack?Если это так, вы бы стремились объединить все файлы JS в один пакет или оставить отдельные пакеты, созданные Webpack, как есть?