webpack优化 - code split

常见的 webpack code split 方法有三种。

多入口配置

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

在项目开发的时候，最开始我们可能不知道会有几个入口，每次增加一个入口都要去配置文件设置，这样会比较麻烦，于是我们可以使用glob库来动态获取入口文件。

// 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。详细参数

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

• webpack 在4.0版本开始对防重复方式进行了改写，通过配置optimization。详细参数

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

optimization 可以看做是对 CommonsChunkPlugin 进行的一次优化。
在旧版关系图中存在着一些缺陷，在各个模块打包的过程中，每个模块之间是通过父子关系来关联的，最后再将所有模块都串联起来，当父子级文件都包含同一个模块的时候，该模块在父级已经成功加载完成，在子级文件没必要再去加载了，此时应该把该模块从文件中移除。
在新版关系图中引入了一个ChunkGroup概念，在入口点或异步拆分点会引用这个文件分组，该分组内的文件全部都是并行加载的，且一个文件可以被多个文件复用。

动态导入

• 使用 import 语法

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

可以通过注释来设置文件名。

• 使用 require 语法

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