分块打包学习笔记
一、举例说明什么是分块打包
项目没有分块打包之前
src/index.js
import _ from 'lodash'
const arr = [1, 2, 3]
console.log(_.join(arr,'_'))
浏览器只请求1个体积大的js文件
缺点:
文件大,加载时间长;
业务代码修改后,重新访问页面,又要重新请求整个js,不能利用缓存;
项目设置分块打包
将公共模块与业务模块分开
src/lodash.js
import _ from 'lodash'
window._ = _;
src/index.js
const arr = [1, 2, 3]
console.log(_.join(arr,'_'))
webpack.common.js
lodash: './src/lodash.js',
main: './src/index.js'
},
浏览器只请求2个体积小的js文件
优点:
打包文件被拆成2个小的js文件,加载快;
业务代码修改后,重新访问页面,只需要重新请求main.js,不用再请求lodash.js,可以利用缓存。
二、webpack实现代码分割的2种方式
以上纯手工的代码分割不太方便,webpack提供了2种代码分割的方法。
1、同步引入
在webpack.common.js里配置optimization
optimization: {
splitChunks: {//代码分割
chunks: 'all'
}
}
打包时,会自动将index.js 分块成main.js(业务代码),和vendors~main.js公共代码)
浏览器请求2个体积小的js文件
2、异步引入(异步import)
异步import文件,需要用babel插件去转换这种语法
安装插件
npm i @babel/plugin-syntax-dynamic-import -D
在.babelrc里配置
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
src/index.js
function getComponent() {
//使用魔法注释/*webpackChunkName:'lodash'*/,是为了打包后文件名为:vendors~lodash.js,如果不注释,会根据文件id命名为0.js
return import(/*webpackChunkName:'lodash'*/'lodash').then(() => {
console.log('laall')
})
}
getComponent();
打包时,会自动将index.js 分块成main.js,和vendors~lodash.js,
无需任何配置会自动进行代码分割,放到新的文件中。
三、SplitChunksPlugin配置参数详解
optimization: {
splitChunks: {
chunks: 'all',//initial只支持同步引入分块打包;async只支持异步引入分块打包;all都支持,initial和all必须配合cacheGroups使用
minSize: 30000,//当引入文件大于30000时才分块,否则不需要
minChunks: 1,//当引入超过1次时才分块,否则不需要
maxAsyncRequests: 5,//普通文件引入文件最多分5块
maxInitialRequests: 3,//入口文件引入的文件最多分3块
automaticNameDelimiter: '~',//分块组名和文件名直接的连接符
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,//将符合test规则的文件打包到vendors组
priority: -10,//优先级,当符合多个规则时,按优先级高的分块规则分块
filename: 'vendors.js'//将多个符合规则的文件打包到1个js文件中
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true//如果一个模块已经被打包过了,当再次使用的时候就不再打包了,直接使用已经打包过的。
}
}
}
},