鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ require.ensure通過(guò)webpack打包后出現(xiàn)2個(gè)文件

require.ensure通過(guò)webpack打包后出現(xiàn)2個(gè)文件

異步加載代碼如下:

index.js :

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

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

order.js也沒(méi)什么特殊的, 里面也同步引用了一些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個(gè)js, 找不到原因

import也試過(guò)了, 也是把order.js拆成了2個(gè)js:

import('../mall/order').then(function(order){
      var order = order;
  });
回答
編輯回答
互擼娃

兩個(gè)文件具體指哪兩個(gè)文件？如果是類(lèi)似 bundle.js 和 0.bundle.js 這種的話(huà)，這是正常的，0.bundle.js 就是指從主 bundle.js 分離出的需要懶加載的那個(gè)文件。

updated

uh...根據(jù)你更新的描述的話(huà)，有試過(guò)對(duì)每個(gè) require.ensure 增加 chunkName 參數(shù)嗎，就是它的最后一個(gè)參數(shù)，這樣對(duì)于相同的懶加載邏輯形成的 bundle 都會(huì)被打包到同一個(gè) chunk 中。我猜 order.js 被生成了兩次是因?yàn)槟銢](méi)有指定 chunkName，這樣 webpack 會(huì)將每次的懶加載邏輯當(dāng)做不同的 chunk 來(lái)對(duì)待。

另外，dependencies 參數(shù)（也就是第一個(gè)參數(shù)）如果是模塊本身并沒(méi)有什么意義，如果沒(méi)有什么必須執(zhí)行的依賴(lài)模塊，保留空就好。

最后，不知道你使用的 webpack 的版本是多少，require.ensure 這個(gè)方法官方已經(jīng)建議棄用了，如果可能的話(huà)，還是建議使用新的 import() 方法。

以上，個(gè)人拙見(jiàn)，如有錯(cuò)誤，還望見(jiàn)諒。

2017年10月31日 07:06
編輯回答
單眼皮

終于解決了, MinChunkSizePlugin這個(gè)插件可以解決

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

order.js被打包成了2個(gè)文件, 然后把2個(gè)文件的體積加起來(lái)的值 , 給到minChunkSize(適當(dāng)加大一點(diǎn)),就可以了.

就是當(dāng)體積小于這個(gè)值時(shí), 就不會(huì)新建chunk .

2017年3月6日 02:19