• 源代码index.js里包含2部分
• ① 业务逻辑代码 1mb
• ② 引入（如lodash包）的代码 1mb
• 若更新了业务逻辑代码，但在浏览器运行时每次都下载2mb的index.js显然不合理，第三方包是不会变的

手动拆分

• webpack.base.js

entry: {main: path.resolve(__dirname, "../src/index.js"),loadsh: path.resolve(__dirname, "../src/lodash.js"),
},

• lodash.js

import _ from 'lodash'
window._ = _

• index.js

const res = _.join('test', 1)
console.log(1, res)

• 打包后index.html

<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/loadsh.js"></script>

使用webpack插件

https://webpack.docschina.org/plugins/split-chunks-plugin/#defaults

• 配置optimization
• 依然在index.js中引入lodash.js

entry: {main: path.resolve(__dirname, "../src/index.js"),
},
optimization: {splitChunks: {chunks: 'all' // 同步/异步代码都要做分割}
},

异步代码

• index.js

// 异步代码
// 只有执行createElement函数时才会引入lodash，打开打包后的index.html才会下载0.js
// 若不执行则不下载
// 异步代码不管是否执行，编译都会生成0.js
function createElement() {return import('lodash').then(({ default: _ }) => {const res = _.join([1, 2, 3], '*')const div = document.createElement('div')div.innerText = resreturn div})
}
createElement().then((div) => {document.body.appendChild(div)
})

• 注意，异步代码webpack.base.js中不需要配置optimization
• 打开页面时，0.js会延迟一点下载

代码分割重命名

• import前添加注释webpackChunkName: "my-loadsh"

function createElement() {return import(/* webpackChunkName: "my-loadsh" */ 'lodash').then(({ default: _ }) => {const res = _.join([1, 2, 3], '*')const div = document.createElement('div')div.innerText = resreturn div})
}
createElement().then((div) => {document.body.appendChild(div)
})

vendors从哪来？

• webpack.base.js 配置cacheGroups后

optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendors: false,default: false,}}
},

• 可配置：
• minSize 对多大的文件分割打包
• minChunks 在入口中引入模块次数>= n时才会做代码分割