Question

我有一个遗留代码库，其中包含一堆散布在项目周围的require()。例如，app主模块看起来像这样。

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个捆绑包，总大小约为900K，在压缩后为200K。

$ find build/ -type f -name '*bundle.js' -exec ls -l {} \; | awk '{total = total + $5}END{print total}'
878054

在这种情况下，您如何解决项目缓慢的问题？你会用Webpack吗？如果是这样，您是否会努力将所有JS文件合并到一个包中，或者保留由Webpack创建的单独包？

一堆Webpack捆绑还是一个？

0 个答案: