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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。