webpack 中 chunks配置和使用詳解
webpack 中 chunks詳解
在 Webpack 項(xiàng)目中，webpack.config.js 是核心配置文件，而非 webpack.json。chunks 的概念與 Webpack 的代碼分割（Code Splitting）功能密切相關(guān)，通過 optimization.splitChunks 配置項(xiàng)可以實(shí)現(xiàn)對代碼塊的分類和優(yōu)化。以下是 Webpack 中 chunks 的分類和配置使用詳解：
一、Chunks 的分類
在 Webpack 中，chunks 通常分為以下三類：
Initial Chunks（初始塊）
- 入口文件（
entry）直接引入的代碼。 - 默認(rèn)情況下，每個入口文件會生成一個獨(dú)立的初始塊。
Async Chunks（異步塊）
- 通過動態(tài)導(dǎo)入（
import()）方式加載的代碼。 - 異步塊會在運(yùn)行時按需加載，減少初始包體積。
Runtime Chunks（運(yùn)行時塊）
- 包含 Webpack 運(yùn)行時代碼的塊，例如模塊加載邏輯和模塊緩存。
- 通過
optimization.runtimeChunk配置可以提取運(yùn)行時代碼到單獨(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é)），超出會嘗試拆分
minChunks: 1, // 被引用次數(shù)達(dá)到多少時才提取為單獨(dú)塊
maxAsyncRequests: 30, // 異步請求的最大并行數(shù)
maxInitialRequests: 30, // 入口點(diǎn)的最大并行請求數(shù)
automaticNameDelimiter: '~', // 塊名稱的分隔符
cacheGroups: { // 緩存組配置
defaultVendors: {
test: /[\\/]node_modules[\\/]/, // 匹配第三方庫
priority: -10, // 優(yōu)先級
filename: 'vendors.js', // 自定義輸出文件名
},
default: {
minChunks: 2, // 被引用至少2次時提取
priority: -20,
reuseExistingChunk: true, // 復(fù)用已存在的塊
},
},
},
},
};2. 配置項(xiàng)說明
chunks
'all'：對同步和異步代碼都進(jìn)行分割。'async'：僅對異步代碼進(jìn)行分割（默認(rèn)值）。'initial'：僅對同步代碼進(jìn)行分割。
minSize
- 生成塊的最小體積，小于該值的塊不會被分割。
maxSize
- 生成塊的最大體積，超出該值的塊會嘗試進(jìn)一步拆分。
cacheGroups
- 用于定義代碼塊的提取規(guī)則，例如將第三方庫提取到
vendors.js。
三、Chunks 配置示例
1. 提取第三方庫
將 node_modules 中的代碼提取到單獨(dú)的文件：
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)導(dǎo)入（按需加載）
使用 import() 動態(tài)加載模塊，Webpack 會自動生成異步塊：
// 示例代碼
button.addEventListener('click', () => {
import('./analytics.js').then(({ trackEvent }) => {
trackEvent('click');
});
});4. 提取運(yùn)行時代碼
將 Webpack 運(yùn)行時代碼提取到單獨(dú)的文件：
module.exports = {
optimization: {
runtimeChunk: 'single', // 提取為單個文件 runtime.js
},
};四、優(yōu)化策略
減少初始加載體積
- 將第三方庫和公共代碼提取到單獨(dú)的文件。
- 使用
import()實(shí)現(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的分類：初始塊、異步塊、運(yùn)行時塊。splitChunks配置：通過chunks、minSize、cacheGroups等選項(xiàng)控制代碼分割。- 優(yōu)化目標(biāo)：減少初始加載體積、提高緩存利用率、按需加載非關(guān)鍵代碼。
通過合理配置 splitChunks，可以顯著提升 Webpack 打包的性能和用戶體驗(yàn)。
到此這篇關(guān)于webpack 中 chunks詳解的文章就介紹到這了,更多相關(guān)webpack chunks詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
llqrcode js識別二維碼解析二維碼信息實(shí)例
這篇文章主要為大家介紹了llqrcode js識別二維碼解析二維碼信息實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
javascript 新聞切換技術(shù)...2007-12-12
這篇文章主要匯總了JavaScript 常見的繼承方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了JS 實(shí)現(xiàn)請求調(diào)度器的方法，幫助大家更好的理解和學(xué)習(xí)使用js，感興趣的朋友可以了解下2021-03-03
H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能
這篇文章主要為大家詳細(xì)介紹了H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript數(shù)組排序的六種常見算法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組排序的六種常見算法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用JavaScript數(shù)組具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
使用sql.js實(shí)現(xiàn)前端SQLite數(shù)據(jù)庫操作
sql.js?是將?SQLite?數(shù)據(jù)庫編譯為?JavaScript?的庫,允許開發(fā)者在瀏覽器環(huán)境中直接操作?SQLite?數(shù)據(jù)庫,本文主要介紹了如何使用sql.js實(shí)現(xiàn)多張表的關(guān)聯(lián)操作,需要的可以了解下2024-12-12
SpringMVC restful 注解之@RequestBody進(jìn)行json與object轉(zhuǎn)換
這篇文章主要介紹了SpringMVC restful 注解之@RequestBody進(jìn)行json與object轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2015-12-12
javascript使用中為什么10..toString()正常而10.toString()出錯呢
在JavaScript中為什么10..toString()正常，而10.toString()出錯呢？這個問題一直困擾著我，所抽時間搜集整理下，曬出來與大家分享感興趣的朋友可以了解下，希望對你們有幫助2013-01-01
JavaScript 數(shù)組的進(jìn)化與性能分析
這篇文章主要介紹了JavaScript 數(shù)組的進(jìn)化與性能分析,本文講得更多的是內(nèi)存、優(yōu)化、語法差異、性能、近來的演進(jìn)。需要的朋友可以參考下2017-09-09