webpack 中 chunks配置和使用详解_Javascript

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