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(), // 分析打包结果
  ],
};