常见的 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')
