Webpack打包过程中的核心机制-Chunk 的生成与优化

一、入口点分割策略

入口文件会生成独立的 Chunk，由 EntryPlugin 触发。

源码解析

EntryPlugin 注册
EntryPlugin 在 apply 方法中注册入口点：

javascript 复制代码

// lib/EntryPlugin.js
apply(compiler) {
  compiler.hooks.compilation.tap("EntryPlugin", (compilation, { normalModuleFactory }) => {
    compilation.dependencyFactories.set(EntryDependency, normalModuleFactory);
  });

  compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {
    const { entry, options, context } = this;
    const dep = EntryPlugin.createDependency(entry, options);
    compilation.addEntry(context, dep, options, err => { /* ... */ });
  });
}

Chunk 创建
compilation.addEntry 调用 addEntry 方法，最终在 compilation 中创建 Chunk：

javascript 复制代码

// lib/Compilation.js
addEntry(context, entry, options, callback) {
  this._addEntryItem(context, entry, "dependencies", options, (err, module) => {
    if (module) {
      const chunk = this.addChunk(module.name); // 创建新 Chunk
      chunk.entryModule = module;
      chunk.name = module.name;
      // 将模块与 Chunk 关联
      this.chunkGraph.connectChunkAndModule(chunk, module);
    }
    callback(err);
  });
}

关键点 ：每个入口文件生成独立 Chunk，addChunk 是 Chunk 创建的源头。

二、动态导入分割策略

动态导入（import()）通过 ImportDependenciesBlock 触发代码分割。

源码解析

依赖解析
ImportParserPlugin 处理 import() 语法，生成 ImportDependency：

javascript 复制代码

// lib/dependencies/ImportParserPlugin.js
parser.hooks.importCall.tap("ImportParserPlugin", expr => {
  const dep = new ImportDependency(/* ... */);
  parser.state.current.addBlock(dep); // 添加到当前模块依赖
});

Chunk 分割
Compilation 处理依赖时触发分割：

javascript 复制代码

// lib/Compilation.js
handleModuleCreation(/* ... */) {
  this.processModuleDependencies(module, err => {
    // 处理 ImportDependency
    if (block instanceof ImportDependenciesBlock) {
      this.handleBlockPreOrder(block, (err, result) => {
        this.addChunkInGroup(block.group, module); // 创建新 Chunk Group
      });
    }
  });
}

Chunk 生成
addChunkInGroup 最终生成新 Chunk：

javascript 复制代码

// lib/Compilation.js
addChunkInGroup(group, module) {
  const chunk = this.addChunk(module.identifier());
  group.chunks.push(chunk);
  return chunk;
}

关键点 ：动态导入生成 ImportDependenciesBlock，触发异步 Chunk 创建。

三、SplitChunksPlugin 优化策略

SplitChunksPlugin 通过模块复用与规则匹配优化 Chunk 结构。

源码解析

插件入口
SplitChunksPlugin 在 optimizeChunks 阶段执行：

javascript 复制代码

// lib/optimize/SplitChunksPlugin.js
apply(compiler) {
  compiler.hooks.thisCompilation.tap("SplitChunksPlugin", compilation => {
    compilation.hooks.optimizeChunks.tap("SplitChunksPlugin", chunks => {
      this.optimize(compilation, chunks);
    });
  });
}

模块分组
getCacheGroups 方法收集模块分组规则：

javascript 复制代码

getCacheGroups(compilation) {
  const cacheGroups = [];
  for (const key of Object.keys(this.options.cacheGroups)) {
    const group = this.options.cacheGroups[key];
    cacheGroups.push({ key, /* ...规则配置 */ });
  }
  return cacheGroups;
}

Chunk 分割逻辑
optimize 方法遍历模块，应用规则合并 Chunk：

javascript 复制代码

optimize(compilation, chunks) {
  const cacheGroups = this.getCacheGroups(compilation);
  for (const module of compilation.modules) {
    for (const cacheGroup of cacheGroups) {
      if (cacheGroup.test(module)) { // 匹配模块规则
        const chunk = this.getChunk(module, cacheGroup);
        if (!chunk) {
          chunk = compilation.addChunk(cacheGroup.name); // 创建新 Chunk
        }
        compilation.chunkGraph.connectChunkAndModule(chunk, module);
      }
    }
  }
}

关键配置规则：

minSize: 新 Chunk 最小体积
minChunks: 模块被引用次数阈值
cacheGroups: 自定义分组规则

四、Chunk 生成与优化流程图

总结

入口点 ：直接通过 addEntry 生成独立 Chunk。
动态导入 ：通过 ImportDependenciesBlock 触发异步 Chunk。
SplitChunksPlugin：基于模块复用规则优化 Chunk 结构。

源码中核心方法：

compilation.addChunk()：Chunk 创建入口。
chunkGraph.connectChunkAndModule()：关联模块与 Chunk。
SplitChunksPlugin.optimize()：执行优化策略。

理解 Chunk 分割策略需要结合 模块依赖图 和 Chunk 合并规则，Webpack 通过分层处理（入口、动态加载、优化）实现灵活的代码分割。