webpack 中 chunks配置和使用详解
作者：二川bro
chunks 的概念与 Webpack 的代码分割（Code Splitting）功能密切相关,通过 optimization.splitChunks 配置项可以实现对代码块的分类和优化,下面给大家介绍webpack 中 chunks配置和使用详解,感兴趣的朋友一起看看吧
webpack 中 chunks详解
在 Webpack 项目中，webpack.config.js 是核心配置文件，而非 webpack.json。chunks 的概念与 Webpack 的代码分割（Code Splitting）功能密切相关，通过 optimization.splitChunks 配置项可以实现对代码块的分类和优化。以下是 Webpack 中 chunks 的分类和配置使用详解：
一、Chunks 的分类
在 Webpack 中，chunks 通常分为以下三类：
Initial Chunks（初始块）
- 入口文件（
entry）直接引入的代码。 - 默认情况下，每个入口文件会生成一个独立的初始块。
Async Chunks（异步块）
- 通过动态导入（
import()）方式加载的代码。 - 异步块会在运行时按需加载，减少初始包体积。
Runtime Chunks（运行时块）
- 包含 Webpack 运行时代码的块，例如模块加载逻辑和模块缓存。
- 通过
optimization.runtimeChunk配置可以提取运行时代码到单独的文件。
二、SplitChunks 配置详解
optimization.splitChunks 是 Webpack 4+ 提供的代码分割优化配置项，用于控制如何拆分代码块。
1. 基础配置
module.exports = {
optimization: {
splitChunks: {
chunks: 'all', // 可选值：'all' | 'async' | 'initial'
minSize: 20000, // 生成块的最小体积（字节）
maxSize: 0, // 生成块的最大体积（字节），超出会尝试拆分
minChunks: 1, // 被引用次数达到多少时才提取为单独块
maxAsyncRequests: 30, // 异步请求的最大并行数
maxInitialRequests: 30, // 入口点的最大并行请求数
automaticNameDelimiter: '~', // 块名称的分隔符
cacheGroups: { // 缓存组配置
defaultVendors: {
test: /[\\/]node_modules[\\/]/, // 匹配第三方库
priority: -10, // 优先级
filename: 'vendors.js', // 自定义输出文件名
},
default: {
minChunks: 2, // 被引用至少2次时提取
priority: -20,
reuseExistingChunk: true, // 复用已存在的块
},
},
},
},
};2. 配置项说明
chunks
'all'：对同步和异步代码都进行分割。'async'：仅对异步代码进行分割（默认值）。'initial'：仅对同步代码进行分割。
minSize
- 生成块的最小体积，小于该值的块不会被分割。
maxSize
- 生成块的最大体积，超出该值的块会尝试进一步拆分。
cacheGroups
- 用于定义代码块的提取规则，例如将第三方库提取到
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. 动态导入（按需加载）
使用 import() 动态加载模块，Webpack 会自动生成异步块：
// 示例代码
button.addEventListener('click', () => {
import('./analytics.js').then(({ trackEvent }) => {
trackEvent('click');
});
});4. 提取运行时代码
将 Webpack 运行时代码提取到单独的文件：
module.exports = {
optimization: {
runtimeChunk: 'single', // 提取为单个文件 runtime.js
},
};四、优化策略
减少初始加载体积
- 将第三方库和公共代码提取到单独的文件。
- 使用
import()实现按需加载。
提高缓存利用率
- 为提取的块设置唯一的
contenthash名称，确保文件内容变化时才更新缓存。
控制并行请求数
- 调整
maxAsyncRequests和maxInitialRequests，避免过多的并行请求。
分析打包结果
- 使用
webpack-bundle-analyzer插件可视化分析打包结果，优化分块策略。
五、示例配置文件
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(), // 分析打包结果
],
};六、总结
chunks的分类：初始块、异步块、运行时块。splitChunks配置：通过chunks、minSize、cacheGroups等选项控制代码分割。- 优化目标：减少初始加载体积、提高缓存利用率、按需加载非关键代码。
通过合理配置 splitChunks，可以显著提升 Webpack 打包的性能和用户体验。
到此这篇关于webpack 中 chunks详解的文章就介绍到这了,更多相关webpack chunks详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！