代码分割Code Splitting
通常来讲，我们写项目的时候可以分为两部分，一部分是引用的类库，另一部分是我们写的业务逻辑代码。这两部分打包后会合并到一个js文件中。
这样方式的缺点是：
一、打包生成的main.js可能会很大，首次访问时会慢
二、当页面业务逻辑发生变化时，又要加载全部的内容
解决方式：使用代码分割，将类库的代码打包成一个js文件，将业务逻辑代码打包成一个文件。
这种方式的优点：
一、分为两个js文件，文件体积较小，可以并行加载，提升加载速度
二、当业务逻辑代码发生变化时，只需要加载业务逻辑代码的js文件即可(用户浏览器有缓存)
方式一 手动分割
以lodash类库为例
lodash.js
import _ from 'lodash';
window._ = _;
webpack.config.js
entry: {
lodash: './src/lodash.js',
main: './src/index.js'
}
方式二 webpack
1、同步代码：配置optimization
optimization: {
splitChunks: {
chunks: 'all'
}
}
2、异步代码：无需配置，自动分割
npm install babel-plugin-dynamic-import-webpack --save-dev
.babelrc
{
presets: [
[
"@babel/preset-env", {
targets: {
chrome: "67",
},
useBuiltIns: 'usage'
}
]
],
plugins: ["dynamic-import-webpack"]
}
异步代码
function getComponent() {
return import('lodash').then(({ default: _ }) => {
var element = document.createElement('div');
element.innerHTML = _.join(['Dell', 'Lee'], '-');
return element;
})
}
getComponent().then(element => {
document.body.appendChild(element);
});
es7写法与懒加载
async function getComponent() {
const { default: _ } = await import(/* webpackChunkName:"lodash" */ 'lodash');
const element = document.createElement('div');
element.innerHTML = _.join(['Dell', 'Lee'], '-');
return element;
}
document.addEventListener('click', () =>{
getComponent().then(element => {
document.body.appendChild(element);
});
})
修改异步代码打包文件名
魔法注释：将异步打包的文件命名为lodash
import(/* webpackChunkName:"lodash" */ 'lodash');
之前的动态引入模块插件是非官方的，不支持这种语法，需要更换插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
.babelrc
{
presets: [
[
"@babel/preset-env", {
targets: {
chrome: "67",
},
useBuiltIns: 'usage'
}
]
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
SplitChunksPlugin 参数配置
对同步代码和异步代码分割都有作用
异步代码
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: false, // 不使用vendors,异步代码分割前缀不加'vendors~'
default: false
}
}
}
同步代码
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, // 类库是从node_modules中引入的话就进行代码分割
priority: -10,
filename: 'vendor.js', // 重命名分割文件
},
default: false
}
}
}
配置解析
optimization: {
splitChunks: {
chunks: 'async', // async 只对异步代码生效， all同步异步都生效， initial同步生效
minSize: 30000, // 体积大于30KB的模块才会代码分割
maxSize: 0, // 一般不需要，对大于一定体积的模块尝试进行再次分割
minChunks: 1, // 当一个模块至少被引用了几次后才做代码分割
maxAsyncRequests: 5, // 最多分割几个js文件，超出后后面的不会再进行分割
maxInitialRequests: 3, // 入口文件引入的库最多能分割成几个包
automaticNameDelimiter: '~', // 生成文件名字中间的连接符
automaticNameMaxLength: 30,
name: true, // 使cacheGroups中设置的文件名有效
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, // 从node_modules中引入的模块进行代码分割
priority: -10 // 优先级，同时满足vendors和default，使用优先级高的
},
default: {
// 没有设置test参数，所有的都符合
minChunks: 2,
priority: -20,
reuseExistingChunk: true // 如果引入的模块已经被打包，复用，不再打包
}
}
}
}
文档
babel-plugin-syntax-dynamic-import
split-chunks-plugin
