如何优化Webpack打包后的代码分割

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

手动拆分

• webpack.base.js

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


• lodash.js

import _ from &＃39;lodash&＃39;
window._ &＃61; _


• index.js

const res &＃61; _.join(&＃39;test&＃39;, 1)
console.log(1, res)


• 打包后index.html

<script type&＃61;"text/Javascript" src&＃61;"js/main.js"></script>
<script type&＃61;"text/Javascript" src&＃61;"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: &＃39;all&＃39; // 同步/异步代码都要做分割}
},


异步代码

• index.js

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


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

代码分割重命名

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

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


vendors从哪来&＃xff1f;

• webpack.base.js 配置cacheGroups后

optimization: {splitChunks: {chunks: &＃39;all&＃39;,cacheGroups: {vendors: false,default: false,}}
},


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