webpack 中 chunks配置和使用詳解
更新時(shí)間：2025年04月21日 09:38:01 作者：二川bro
chunks 的概念與 Webpack 的代碼分割（Code Splitting）功能密切相關(guān),通過(guò) optimization.splitChunks 配置項(xiàng)可以實(shí)現(xiàn)對(duì)代碼塊的分類和優(yōu)化,下面給大家介紹webpack 中 chunks配置和使用詳解,感興趣的朋友一起看看吧
webpack 中 chunks詳解
在 Webpack 項(xiàng)目中，webpack.config.js 是核心配置文件，而非 webpack.json。chunks 的概念與 Webpack 的代碼分割（Code Splitting）功能密切相關(guān)，通過(guò) optimization.splitChunks 配置項(xiàng)可以實(shí)現(xiàn)對(duì)代碼塊的分類和優(yōu)化。以下是 Webpack 中 chunks 的分類和配置使用詳解：
一、Chunks 的分類
在 Webpack 中，chunks 通常分為以下三類：
Initial Chunks（初始?jí)K）
- 入口文件（
entry）直接引入的代碼。 - 默認(rèn)情況下，每個(gè)入口文件會(huì)生成一個(gè)獨(dú)立的初始?jí)K。
Async Chunks（異步塊）
- 通過(guò)動(dòng)態(tài)導(dǎo)入（
import()）方式加載的代碼。 - 異步塊會(huì)在運(yùn)行時(shí)按需加載，減少初始包體積。
Runtime Chunks（運(yùn)行時(shí)塊）
- 包含 Webpack 運(yùn)行時(shí)代碼的塊，例如模塊加載邏輯和模塊緩存。
- 通過(guò)
optimization.runtimeChunk配置可以提取運(yùn)行時(shí)代碼到單獨(dú)的文件。
二、SplitChunks 配置詳解
optimization.splitChunks 是 Webpack 4+ 提供的代碼分割優(yōu)化配置項(xiàng)，用于控制如何拆分代碼塊。
1. 基礎(chǔ)配置
module.exports = {
optimization: {
splitChunks: {
chunks: 'all', // 可選值：'all' | 'async' | 'initial'
minSize: 20000, // 生成塊的最小體積（字節(jié)）
maxSize: 0, // 生成塊的最大體積（字節(jié)），超出會(huì)嘗試拆分
minChunks: 1, // 被引用次數(shù)達(dá)到多少時(shí)才提取為單獨(dú)塊
maxAsyncRequests: 30, // 異步請(qǐng)求的最大并行數(shù)
maxInitialRequests: 30, // 入口點(diǎn)的最大并行請(qǐng)求數(shù)
automaticNameDelimiter: '~', // 塊名稱的分隔符
cacheGroups: { // 緩存組配置
defaultVendors: {
test: /[\\/]node_modules[\\/]/, // 匹配第三方庫(kù)
priority: -10, // 優(yōu)先級(jí)
filename: 'vendors.js', // 自定義輸出文件名
},
default: {
minChunks: 2, // 被引用至少2次時(shí)提取
priority: -20,
reuseExistingChunk: true, // 復(fù)用已存在的塊
},
},
},
},
};2. 配置項(xiàng)說(shuō)明
chunks
'all'：對(duì)同步和異步代碼都進(jìn)行分割。'async'：僅對(duì)異步代碼進(jìn)行分割（默認(rèn)值）。'initial'：僅對(duì)同步代碼進(jìn)行分割。
minSize
- 生成塊的最小體積，小于該值的塊不會(huì)被分割。
maxSize
- 生成塊的最大體積，超出該值的塊會(huì)嘗試進(jìn)一步拆分。
cacheGroups
- 用于定義代碼塊的提取規(guī)則，例如將第三方庫(kù)提取到
vendors.js。
三、Chunks 配置示例
1. 提取第三方庫(kù)
將 node_modules 中的代碼提取到單獨(dú)的文件：
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},2. 提取公共代碼
將多個(gè)入口文件中共享的代碼提取到 common.js：
// 示例代碼
button.addEventListener('click', () => {
import('./analytics.js').then(({ trackEvent }) => {
trackEvent('click');
});
});3. 動(dòng)態(tài)導(dǎo)入（按需加載）
使用 import() 動(dòng)態(tài)加載模塊，Webpack 會(huì)自動(dòng)生成異步塊：
// 示例代碼
button.addEventListener('click', () => {
import('./analytics.js').then(({ trackEvent }) => {
trackEvent('click');
});
});4. 提取運(yùn)行時(shí)代碼
將 Webpack 運(yùn)行時(shí)代碼提取到單獨(dú)的文件：
module.exports = {
optimization: {
runtimeChunk: 'single', // 提取為單個(gè)文件 runtime.js
},
};四、優(yōu)化策略
減少初始加載體積
- 將第三方庫(kù)和公共代碼提取到單獨(dú)的文件。
- 使用
import()實(shí)現(xiàn)按需加載。
提高緩存利用率
- 為提取的塊設(shè)置唯一的
contenthash名稱，確保文件內(nèi)容變化時(shí)才更新緩存。
控制并行請(qǐng)求數(shù)
- 調(diào)整
maxAsyncRequests和maxInitialRequests，避免過(guò)多的并行請(qǐng)求。
分析打包結(jié)果
- 使用
webpack-bundle-analyzer插件可視化分析打包結(jié)果，優(yōu)化分塊策略。
五、示例配置文件
const path = require('path');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
entry: {
main: './src/index.js',
admin: './src/admin.js',
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
},
common: {
name: 'common',
minChunks: 2,
priority: -10,
},
},
},
runtimeChunk: 'single',
},
plugins: [
new BundleAnalyzerPlugin(), // 分析打包結(jié)果
],
};六、總結(jié)
chunks的分類：初始?jí)K、異步塊、運(yùn)行時(shí)塊。splitChunks配置：通過(guò)chunks、minSize、cacheGroups等選項(xiàng)控制代碼分割。- 優(yōu)化目標(biāo)：減少初始加載體積、提高緩存利用率、按需加載非關(guān)鍵代碼。
通過(guò)合理配置 splitChunks，可以顯著提升 Webpack 打包的性能和用戶體驗(yàn)。
到此這篇關(guān)于webpack 中 chunks詳解的文章就介紹到這了,更多相關(guān)webpack chunks詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue(javaScript)操作字符串的一些常用方法總結(jié)
在平時(shí)前端開(kāi)發(fā)中,我們不難發(fā)現(xiàn)經(jīng)常會(huì)用到字符串操作,這篇文章主要給大家介紹了關(guān)于vue(javaScript)操作字符串的一些常用方法的相關(guān)資料,需要的朋友可以參考下2024-01-01
RequireJS以一個(gè)相對(duì)于baseUrl的地址來(lái)加載所有的代碼。接下來(lái)通過(guò)本文給大家分享RequireJs官方使用教程，感興趣的朋友一起看看吧2017-10-10
JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能,涉及javascript針對(duì)頁(yè)面form表單元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了關(guān)于js陀螺儀的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了 Jasper的自動(dòng)檢測(cè)實(shí)現(xiàn)的機(jī)制比較簡(jiǎn)單，依靠某后臺(tái)線程不斷檢測(cè)JSP文件與編譯后的class文件的最后修改時(shí)間是否相同，若相同則認(rèn)為沒(méi)有改動(dòng)，但倘若不同則需要重新編譯,需要的朋友可以參考下2016-12-12
基于javascript實(shí)現(xiàn)日歷功能原理及代碼實(shí)例
這篇文章主要介紹了基于javascript實(shí)現(xiàn)日歷效果原理及代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了在遇到數(shù)據(jù)或邏輯未成功更新問(wèn)題時(shí),如何通過(guò)刷新頁(yè)面、設(shè)置、清除緩存等方法進(jìn)行解決,文中通過(guò)圖文將各種情況下清空緩存的方案介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
checkbox全選所涉及到的知識(shí)點(diǎn)介紹
checkbox全選涉及到的知識(shí)點(diǎn)比如IE里起作用，火狐不起作用，getElementById()與getElementsByName()的區(qū)別等等2013-12-12
微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒?dòng)驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript中Promise的使用方法實(shí)例
現(xiàn)在不會(huì)用Promise都不好意思說(shuō)自己是前端,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05