代码分片
通过入口划分代码
通过入口配置进行一些简单有效的代码拆分。
对于web应用来说通常会有一些库和工具是不常变动的，可以将它们放在一个单独的入口中，由该入口产生的资源不会经常更新，因此可以有效地利用客户端缓存，让用户不必在每次请求页面时都让资源重新加载。
// webpack.config.js
...
entry:{
app: './src/app.js',
lib: ['lib-a', 'lib-b', 'lib-c']
}
<!--index.html-->
...
<script src="./dist/lib.js"></script>
<script src="./dist/app.js"></script>
这种拆分方法主要适用于那些将接口绑定在全局对象上的库，因为业务代码中的模块无法直接引用库中的模块，而这属于不同的依赖树。
但这样仍会带来新的问题：公共模块与业务模块处于不同依赖树的问题以及很多页面并不需要公共模块的问题。
optimization
在webpack4之前，做代码切片使用的是CommonsChunkPlugin，而在4及之后，取而代之的是optimization。
举例
1. 安装
// 两种方式二选一
yarn add optimization react
// 或
npm install optimization react
2. a.js & b.js
// a.js
import React from 'react'
import('./b.js');
document.write('a.js', React.version)
// b.js
import React from 'react'
console.log('b.js', React.version)
3. webpack配置
// webpack.config.js
module.exports = {
entry: './src/a.js',
output: {
filename: 'a.js',
publicPath: '/dist/'
},
mode: 'development',
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
4. 打包
yarn build
// 或
npm run build
结果如图所示：
特性
首先观察上面的配置，从上面的配置项中可以看到：
而从上图打包结果中看，可以看到三个文件包：0.a.js、a.js和vendors~main.a.js。其中，vendors~main.a.js则是将react提取到了里面。
提取条件
需要注意的是，默认提取方式为异步提取。
配置
分为四类：
默认配置
module.exports = {
...
splitChunks: {
chunks: 'async',
miSize: {
javascript: 30000,
style: 50000,
},
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
小结
本篇了解了两种代码分片方式：
而借助这些方法，我们可以有效的缩小资源体积，更好的利用缓存，从而给用户更有好的体验度。
下一篇介绍生产环境优化中的一些配置，如环境配置封装、sourceMap等。
本文分享自微信公众号 - 流眸（zxm0146）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。