Chunk生成算法

Chunk生成算法概述

Webpack中的Chunk生成算法是构建过程中最核心的部分之一，它决定了模块如何被分组打包。这个算法直接影响最终产物的数量、大小以及加载性能。理解Chunk生成规则对优化构建结果至关重要。

入口起点与Chunk生成

最基本的Chunk生成方式是通过配置中的entry属性。每个入口文件都会生成一个独立的Chunk：

// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  }
};

这个配置会生成两个Chunk：app和admin。Webpack会从这两个入口开始，递归构建依赖图。

SplitChunksPlugin的优化分割

SplitChunksPlugin是控制Chunk分割的核心插件，默认配置如下：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

chunks参数详解

chunks参数有三种取值：

• async：只分割动态导入的模块
• initial：只分割同步导入的模块
• all：同时处理两种导入方式

cacheGroups配置策略

cacheGroups允许定义自定义Chunk分组规则：

cacheGroups: {
  reactVendor: {
    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
    name: 'react-vendor',
    chunks: 'all'
  },
  utility: {
    test: /[\\/]src[\\/]utilities[\\/]/,
    minSize: 0
  }
}

动态导入与Chunk生成

动态导入会触发新的Chunk生成，这是代码分割的关键：

// 会生成独立的Chunk
import('./module').then(module => {
  module.doSomething();
});

// 魔法注释可以指定Chunk名称
import(/* webpackChunkName: "my-chunk" */ './module');

运行时Chunk

Webpack会生成运行时代码来管理Chunk加载，可以单独提取：

module.exports = {
  optimization: {
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    }
  }
};

Chunk命名规则

Chunk名称可以通过多种方式确定：

1. 入口Chunk使用entry中定义的key
2. 动态导入可以使用魔法注释指定
3. SplitChunksPlugin生成的Chunk遵循cacheGroups.name或自动生成

// 生成名为"my-special-chunk"的Chunk
import(/* webpackChunkName: "my-special-chunk" */ './special');

Chunk哈希与长效缓存

为支持缓存策略，Chunk文件名可以包含哈希：

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js'
}

哈希类型包括：

• [hash]：整个构建的哈希
• [chunkhash]：Chunk内容哈希
• [contenthash]：根据文件内容生成

Chunk加载优化

通过预加载指令可以优化Chunk加载：

import(/* webpackPrefetch: true */ './path/to/module');
import(/* webpackPreload: true */ './path/to/module');

自定义Chunk生成

可以通过插件API干预Chunk生成过程：

compiler.hooks.compilation.tap('MyPlugin', compilation => {
  compilation.hooks.optimizeChunks.tap('MyPlugin', chunks => {
    // 修改chunks逻辑
  });
});

Chunk图与模块依赖

Webpack内部维护Chunk图数据结构：

class ChunkGraph {
  getChunkModules(chunk) {
    // 返回Chunk包含的模块
  }
  getChunkEntryModules(chunk) {
    // 返回入口模块
  }
}

常见Chunk生成模式分析

单页应用典型配置

{
  entry: './src/index.js',
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors'
        }
      }
    }
  }
}

多页应用配置示例

{
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }
}

Chunk生成性能考量

Chunk数量过多会导致：

• 构建时间增加
• HTTP请求增多
• 浏览器解析开销增大

可以通过以下参数控制：

• maxAsyncRequests：并行加载的最大请求数
• maxInitialRequests：入口点的最大请求数
• minSize：生成Chunk的最小体积

Chunk生成调试技巧

使用stats配置输出详细信息：

stats: {
  chunks: true,
  chunkModules: true,
  chunkOrigins: true,
  modules: false
}

或在代码中访问compilation对象：

compiler.hooks.done.tap('MyPlugin', stats => {
  const json = stats.toJson();
  console.log(json.chunks);
});

Webpack5的改进

Webpack5对Chunk生成算法做了重要优化：

1. 持久化缓存支持
2. 改进的Tree Shaking
3. 模块联邦支持
4. 更智能的Chunk分割

module.exports = {
  cache: {
    type: 'filesystem'
  }
};