常見的 webpack code split 方法有三種。

多入口配置

entry: {
    login: "./src/login.js",
    app: "./src/main.js",
    ...
}

在項目開發(fā)的時候，最開始我們可能不知道會有幾個入口，每次增加一個入口都要去配置文件設置，這樣會比較麻煩，于是我們可以使用glob庫來動態(tài)獲取入口文件。

// utils.js
var glop = require('glop');

exports.getEntry = function(globPath) {
    var dirname, name;
    return glob.sync(globPath).reduce((acc, entry) => {
        dirname = path.dirname(entry);
        name = dirname.slice(dirname.lastIndexOf('/') + 1);
        acc[name] = entry;
        return acc;
    }, {})
}


// webpack.base.js
entry: utils.getEntry('./src/views/*/index.js')

使用 plugins 配置進行分割

• CommonsChunkPlugin。詳細參數(shù)

new webpack.optimize.CommonsChunkPlugin({
    name: 'commons'
})

• webpack 在4.0版本開始對防重復方式進行了改寫，通過配置optimization。詳細參數(shù)

optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

optimization 可以看做是對 CommonsChunkPlugin 進行的一次優(yōu)化。
在舊版關系圖中存在著一些缺陷，在各個模塊打包的過程中，每個模塊之間是通過父子關系來關聯(lián)的，最后再將所有模塊都串聯(lián)起來，當父子級文件都包含同一個模塊的時候，該模塊在父級已經(jīng)成功加載完成，在子級文件沒必要再去加載了，此時應該把該模塊從文件中移除。
在新版關系圖中引入了一個ChunkGroup概念，在入口點或異步拆分點會引用這個文件分組，該分組內的文件全部都是并行加載的，且一個文件可以被多個文件復用。

動態(tài)導入

• 使用 import 語法

import(/* webpackChunkName: "home" */ "url文件路徑").then((text)=> {
    // do something
})

可以通過注釋來設置文件名。

• 使用 require 語法

require.ensure(["url文件路徑"], function () {
    // do something
}, 'btn2')