Webpack系列——代码分离(Code Splitting)
作者:互联网
代码分离(Code Splitting)
// index.js
import _ from 'lodash';
const ele = document.createElement('div');
ele.innerHTML = _.join(['Code', 'Splitting'], '---');
document.body.appendChild(ele);
以上代码中,在开头同步引入了 lodash ,这没什么问题,但是一旦这个 index.js 文件很大,只要 index.js 中代码一变化,那么整个 index.js 就会重新加载,这是,lodash 又会被重新引入。简而言之,每次修改 index.js ,就会导致一次 lodash 的引入,这是一种浪费。
Entry 入口配置
将固定复用的代码(以 lodash 为例)卸载一个 js 文件中,然后放在 entry 入口配置里。
注意:lodash 和 index 的先后顺序
// lodash.js
import _ from 'lodash'
window._ = _
// index.js (主文件)
const ele = document.createElement('div')
ele.innerHTML = _.join(['Code', 'Splitting'], '---')
document.body.appendChild(ele)
webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: {
lodash: './src/lodash.js', // 注意顺序,lodash 写在前面
index: './src/index.js' // 这样 index.js 的代码才能用到 lodash
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
...
}
这样,main.js 就被拆分为 lodash.js 和 index.js。
-
当首次加载页面时,lodash.js 被加载了一份(1.5M), index.js 被加载了一份(44.2kB)。
-
当修改业务代码时,只会重新加载 index.js (44.2kB),而 lodash.js的那一份(1.5MB)则会被浏览器缓存,不会重新被加载。
这是手动分离代码的一种方式,但是还是分麻烦。
Code Splitting
1.默认配置
webpack 提供了代码分离的特性,默认是将 异步代码 按照以下方式进行代码分离的:
module.exports = {
...
optimization: {
splitChunks: {
chunks: 'async', // 同步 or 异步,这里是异步
minSize: 20000, // 如果模块大小小于这个值,则不会被分割 20k
minRemainingSize: 0, // 最小可保存大小,开发模式下为0,其他情况下等于minSize,一般不用手动配置
minChunks: 1, // 如果模块被引用次数小于这个值,则不会被分割
maxAsyncRequests: 30, // 异步模块,一次最佳被加载的次数
maxInitialRequests: 30, // 入口模块最多被加载的次数
enforceSizeThreshold: 50000, // 强制分割的大小阈值 50k
cacheGroups: { // 缓存组
defaultVendors: { // 打包第三方库
test: /[\\/]node_modules[\\/]/, // 正则匹配第三方库文件
priority: -10, // 优先级
// 如果一个模块已经被打包过了,那么这个模块页不会被打包了
reuseExistingChunk: true,
},
default: {
minChunks: 2, // 被超过两个模块引用,才会被打包
priority: -20, // 优先级
reuseExistingChunk: true
}
}
}
}
}
2.同步代码的处理
上述的处理显然对同步代码是无能为力的,于是我们这样设置: 将 optimization.splitChunks.chunks的值设置为 all ,它表示:不管同步还是异步,都会进行代码分离,但是请注意,如果你的共用模块不属于第三方库(也就是不能在 node_modules 中找到),而是属于自己写的一些代码模块,这些代码就会按照 cacheGroups下的 default 配置打包。如果属于第三方库,就按照 cacheGroups 下的default Vendors 配置打包。
module.exports = {
...
optimization: {
splitChunks: {
chunks: 'all', // 有效值为 all,async 和 initial,
minSize: 1000, // 自己设置最小分割大小
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority, -10,
reuseExistingChunk: true,
filename: 'vendors.js' // 自定义打包后的文件名
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
filename: 'common.js'
}
}
}
}
}
这样,业务代码和第三方库或自己的模块代码就会被分开,效果与我们手动去分割代码是一样的。
如果打包后,发现自己写的模块没有被分割出来,说明自己的模块大小不符合分割的条件(minSize),或不符合缓存组中的条件(minChunks)... ...
3.异步代码的处理
对于异步代码, webpack 默认就开启对异步代码进行分离。
因此,我们并不需要做什么特殊的处理,它就会帮你分离好。
通过动态引入(import()
)的代码就是典型的异步代码,它会在打包后生成一个 chunk:
// index.js
function getComponent() {
return import(/* webpackChunkName: 'lodash' */ 'lodash').then(({ default: _ }) => {
const ele = document.createElement('div')
ele.innerHTML = _.join(['Code', 'Splitting'], '---')
return ele
})
}
// 也可以使用异步函数引入
// async function getComponent() {
// const { default: _ } = await import(/* webpackChunkName: 'lodash' */ 'lodash')
// const ele = document.createElement('div')
// ele.innerHTML = _.join(['Code', 'Splitting'], '---')
// return ele
// }
document.addEventListener('click', () => {
getComponent().then(ele => {
document.body.appendChild(ele)
})
})
注意: /* webpackChunkName: 'lodash' */
是一个魔法注释,可以自定义分离文件(chunk)的名称,chunk就是被分离的代码。
这些动态引入的代码,在首次加载时并不会被引入。(此时 lodash.js 并没有被引入)
只有点击触发响应的时间(点击了页面,触发 getComponent 函数),这时才引入了 lodash.js。
在一定程度上,动态引入的方式是优于同步引入的,上面动态引入有着懒加载(lazy loading)的效果,使用异步代码,代码的利用率和页面性能会得到提升,这也就是为什么 webpack 默认对异步代码进行分离的原因。
标签:index,Code,lodash,异步,代码,Splitting,js,Webpack,ele 来源: https://blog.csdn.net/Smart_J_King/article/details/122455404