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