• 源代碼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時才會做代碼分割