webpack 中 chunks配置和使用详解

曾馥

webpack 中 chunks详解

在 Webpack 项目中，

1. webpack.config.js

复制代码

是核心配置文件，而非

1. webpack.json

复制代码

。

1. chunks

复制代码

的概念与 Webpack 的代码分割（Code Splitting）功能密切相关，通过

1. optimization.splitChunks

复制代码

配置项可以实现对代码块的分类和优化。以下是 Webpack 中

1. chunks

复制代码

的分类和配置使用详解：

一、Chunks 的分类

在 Webpack 中，

1. chunks

复制代码

通常分为以下三类：
Initial Chunks（初始块）

• 入口文件（
  1. entry

  复制代码
  ）直接引入的代码。
  
• 默认情况下，每个入口文件会生成一个独立的初始块。
  

Async Chunks（异步块）

• 通过动态导入（
  1. import()

  复制代码
  ）方式加载的代码。
  
• 异步块会在运行时按需加载，减少初始包体积。
  

Runtime Chunks（运行时块）

• 包含 Webpack 运行时代码的块，例如模块加载逻辑和模块缓存。
  
• 通过
  1. optimization.runtimeChunk

  复制代码
  配置可以提取运行时代码到单独的文件。
  

二、SplitChunks 配置详解

1. optimization.splitChunks

复制代码

是 Webpack 4+ 提供的代码分割优化配置项，用于控制如何拆分代码块。

1. 基础配置

1. module.exports = {
   
2.   optimization: {
   
3.     splitChunks: {
   
4.       chunks: 'all', // 可选值：'all' | 'async' | 'initial'
   
5.       minSize: 20000, // 生成块的最小体积（字节）
   
6.       maxSize: 0, // 生成块的最大体积（字节），超出会尝试拆分
   
7.       minChunks: 1, // 被引用次数达到多少时才提取为单独块
   
8.       maxAsyncRequests: 30, // 异步请求的最大并行数
   
9.       maxInitialRequests: 30, // 入口点的最大并行请求数
   
10.       automaticNameDelimiter: '~', // 块名称的分隔符
    
11.       cacheGroups: { // 缓存组配置
    
12.         defaultVendors: {
    
13.           test: /[\\/]node_modules[\\/]/, // 匹配第三方库
    
14.           priority: -10, // 优先级
    
15.           filename: 'vendors.js', // 自定义输出文件名
    
16.         },
    
17.         default: {
    
18.           minChunks: 2, // 被引用至少2次时提取
    
19.           priority: -20,
    
20.           reuseExistingChunk: true, // 复用已存在的块
    
21.         },
    
22.       },
    
23.     },
    
24.   },
    
25. };

复制代码

2. 配置项说明

1. chunks

复制代码

• 1. 'all'

  复制代码
  ：对同步和异步代码都进行分割。
  
• 1. 'async'

  复制代码
  ：仅对异步代码进行分割（默认值）。
  
• 1. 'initial'

  复制代码
  ：仅对同步代码进行分割。
  

1. minSize

复制代码

• 生成块的最小体积，小于该值的块不会被分割。
  

1. maxSize

复制代码

• 生成块的最大体积，超出该值的块会尝试进一步拆分。
  

1. cacheGroups

复制代码

• 用于定义代码块的提取规则，例如将第三方库提取到
  1. vendors.js

  复制代码
  。
  

三、Chunks 配置示例


1. 提取第三方库

将

1. node_modules

复制代码

中的代码提取到单独的文件：

1. cacheGroups: {
   
2.   vendors: {
   
3.     test: /[\\/]node_modules[\\/]/,
   
4.     name: 'vendors',
   
5.     chunks: 'all',
   
6.   },
   
7. },

复制代码

2. 提取公共代码

将多个入口文件中共享的代码提取到

1. common.js

复制代码

：

1. // 示例代码
   
2. button.addEventListener('click', () => {
   
3.   import('./analytics.js').then(({ trackEvent }) => {
   
4.     trackEvent('click');
   
5.   });
   
6. });

复制代码

3. 动态导入（按需加载）

使用

1. import()

复制代码

动态加载模块，Webpack 会自动生成异步块：

1. // 示例代码
   
2. button.addEventListener('click', () => {
   
3.   import('./analytics.js').then(({ trackEvent }) => {
   
4.     trackEvent('click');
   
5.   });
   
6. });

复制代码

4. 提取运行时代码

将 Webpack 运行时代码提取到单独的文件：

1. module.exports = {
   
2.   optimization: {
   
3.     runtimeChunk: 'single', // 提取为单个文件 runtime.js
   
4.   },
   
5. };

复制代码

四、优化策略

减少初始加载体积

• 将第三方库和公共代码提取到单独的文件。
  
• 使用
  1. import()

  复制代码
  实现按需加载。
  

提高缓存利用率

• 为提取的块设置唯一的
  1. contenthash

  复制代码
  名称，确保文件内容变化时才更新缓存。
  

控制并行请求数

• 调整
  1. maxAsyncRequests

  复制代码
  和
  1. maxInitialRequests

  复制代码
  ，避免过多的并行请求。
  

分析打包结果

• 使用
  1. webpack-bundle-analyzer

  复制代码
  插件可视化分析打包结果，优化分块策略。
  

五、示例配置文件

1. const path = require('path');
   
2. const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
   
3. module.exports = {
   
4.   entry: {
   
5.     main: './src/index.js',
   
6.     admin: './src/admin.js',
   
7.   },
   
8.   output: {
   
9.     filename: '[name].[contenthash].js',
   
10.     path: path.resolve(__dirname, 'dist'),
    
11.     clean: true,
    
12.   },
    
13.   optimization: {
    
14.     splitChunks: {
    
15.       chunks: 'all',
    
16.       cacheGroups: {
    
17.         vendors: {
    
18.           test: /[\\/]node_modules[\\/]/,
    
19.           name: 'vendors',
    
20.         },
    
21.         common: {
    
22.           name: 'common',
    
23.           minChunks: 2,
    
24.           priority: -10,
    
25.         },
    
26.       },
    
27.     },
    
28.     runtimeChunk: 'single',
    
29.   },
    
30.   plugins: [
    
31.     new BundleAnalyzerPlugin(), // 分析打包结果
    
32.   ],
    
33. };

复制代码

六、总结

• 1. chunks

  复制代码
  的分类：初始块、异步块、运行时块。
  
• 1. splitChunks

  复制代码
  配置：通过
  1. chunks

  复制代码
  、
  1. minSize

  复制代码
  、
  1. cacheGroups

  复制代码
  等选项控制代码分割。
  
• 优化目标：减少初始加载体积、提高缓存利用率、按需加载非关键代码。
  

通过合理配置

1. splitChunks

复制代码

，可以显著提升 Webpack 打包的性能和用户体验。
到此这篇关于webpack 中 chunks详解的文章就介绍到这了,更多相关webpack chunks详解内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！