• 源代碼index.js里包含2部分
• ① 業(yè)務(wù)邏輯代碼 1mb
• ② 引入（如lodash包）的代碼 1mb
• 若更新了業(yè)務(wù)邏輯代碼，但在瀏覽器運(yùn)行時(shí)每次都下載2mb的index.js顯然不合理，第三方包是不會(huì)變的

手動(dòng)拆分

• 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

// 異步代碼 // 只有執(zhí)行createElement函數(shù)時(shí)才會(huì)引入lodash，打開打包后的index.html才會(huì)下載0.js // 若不執(zhí)行則不下載 // 異步代碼不管是否執(zhí)行，編譯都會(huì)生成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
• 打開頁(yè)面時(shí)，0.js會(huì)延遲一點(diǎn)下載

代碼分割重命名

• 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 對(duì)多大的文件分割打包
• minChunks 在入口中引入模塊次數(shù)>= n時(shí)才會(huì)做代碼分割

總結(jié)

以上是生活随笔為你收集整理的Webpack进阶（二）代码分割 Code Splitting的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。