require.ensure通过webpack打包后出现2个文件

Question

异步加载代码如下:

index.js :

require.ensure(['../mall/order'],function(require){
      var order = require('../mall/order');
  });
  
或者

require.ensure([],function(require){
      var order = require('../mall/order');
  });

order.js也没什么特殊的, 里面也同步引用了一些js

    var CryptoJS = require('crypto-js/core');
    require('crypto-js/aes');
    require('crypto-js/mode-ecb');
    require('crypto-js/pad-pkcs7');
    require('crypto-js/enc-utf8');
    require('crypto-js/enc-base64');
    var CollectionInfo = require('./collectInfo');
    require('./user');
    require('./address');
    var Order = {
        ...
    }
    module.exports = Order;

order.js打包后被拆成了2个js, 找不到原因

---

import也试过了, 也是把order.js拆成了2个js:

import('../mall/order').then(function(order){
      var order = order;
  });

Answer 1

两个文件具体指哪两个文件？如果是类似 bundle.js 和 0.bundle.js 这种的话，这是正常的，0.bundle.js 就是指从主 bundle.js 分离出的需要懒加载的那个文件。

---

updated

uh...根据你更新的描述的话，有试过对每个 require.ensure 增加 chunkName 参数吗，就是它的最后一个参数，这样对于相同的懒加载逻辑形成的 bundle 都会被打包到同一个 chunk 中。我猜 order.js 被生成了两次是因为你没有指定 chunkName，这样 webpack 会将每次的懒加载逻辑当做不同的 chunk 来对待。

另外，dependencies 参数（也就是第一个参数）如果是模块本身并没有什么意义，如果没有什么必须执行的依赖模块，保留空就好。

最后，不知道你使用的 webpack 的版本是多少，require.ensure 这个方法官方已经建议弃用了，如果可能的话，还是建议使用新的 import() 方法。

以上，个人拙见，如有错误，还望见谅。

Answer 2

终于解决了, MinChunkSizePlugin这个插件可以解决

new webpack.optimize.MinChunkSizePlugin({
  minChunkSize: 102400
});

order.js被打包成了2个文件, 然后把2个文件的体积加起来的值 , 给到minChunkSize(适当加大一点),就可以了.

就是当体积小于这个值时, 就不会新建chunk .