Куча пачек 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, как есть?

0 ответов

Другие вопросы по тегам