[RFC] multiple entry + initial chunk splitting support

[PeachScript]

功能描述

为了支持 MPA 场景，需要支持多 entry，配置方式类似：

{
  entry: {
    pageA: './src/pages/A.tsx',
    pageB: './src/pages/B.tsx'
  }
}

以及在 MPA 的场景下，提取 shared chunk 是常见需求，需要 Code Splitting 能支持对 initial chunk 做提取，在 webpack 中的配置类似：

{
  common: {
    chunks: 'initial',
    name: 'common',
    minChunks: 2,
  },
}

问题分析

主要解决 4 个问题：

1. Mako 虽然支持多 entry 的配置项，但 runtime map 数据没对 entry 做差异化
2. Code Splitting 不支持 entry chunk 的公共模块提取，没法提取 shared entry
3. HTML 生成插入 chunks 要考虑 shared chunk 的依赖关系，webpack 有 html-webpack-plugin，但 Mako 不做 HTML 生成，这个关系可能需要通过 assets 元信息给出去
4. runtime 要支持 shared chunk 和 entry chunk 的模块合并

以下是每个问题具体的解法。

解决思路

runtime map 数据区分 entry

目前看应该在 map 数据生成的时候改为根据 chunk graph 查找依赖的 chunks（包含间接依赖）即可，关键代码位置：

mako/crates/mako/src/generate_chunks.rs

Line 72 in 98b38ef

let (js_chunk_map, css_chunk_map) = Self::chunk_maps(&non_entry_chunk_files);

Code Splitting 支持 entry chunk 的公共模块提取

此前留出了 OptimizeAllowChunks::Entry 的口子但没实现，需要做如下改动：

1. 在遍历模块的时候支持匹配 OptimizeAllowChunks::Entry，生成对应的 optimize_info 对象
2. 在处理 optimize_info 时，支持为 entry 的公共模块生成 ChunkType::Entry 的 chunk，并与原 chunk 建立依赖关系
3. ChunkGraph 的边要记录依赖的类型，用 ChunkDependency 记录该依赖关系是异步的还是同步的
4. 开放 codeSplitting 的配置项，允许接入框架自定义 Mako 的 optimizeGroups（类似 webpack 的 cacheGroups）

HTML 生成时处理 chunks 的依赖关系

有两个思路，但为了降低接入框架的成本，okam 层始终还是会暴露类似 html-webpack-plugin 的配置项：

1. Mako 支持与 html-webpack-plugin 等价的配置项，比如叫 entryHtmlTpl: { filename: string; template: string; templateParameters: string; chunks: string[] }，然后在 generate 阶段根据该配置生成最终的 HTML 文件，插入 script 时需要根据 chunks 中的 chunk 查找到上游 sync chunk 依赖作为前置 script 引入，okam 直接透传配置（不选的原因：上层框架比如 Smallfish 对 HTML 生成的自定义程度很高，Mako 只提供静态配置项很难支持）
2. Mako 在 stats 文件中记录 chunks 之前的关系，由 okam 根据 stats 来实现类似 html-webpack-plugin 的能力（不选的原因：okam 尽量做薄，且同样很难满足自定义 HTML 生成的场景）
3. ✅ Mako 在 stats 文件中记录 chunks 之前的关系，由接入框架根据 stats 自定义生成 HTML

runtime 支持 shared chunk 和 entry chunk 的模块合并

应该必须要引入 namespace 的概念了，因为在有 shared chunk 的情况下，shared chunk 通常是先于 entry chunk 加载的，它会把自己包含的模块先放入 namespace 的 map 中，类似：

(self.webpackChunk_example_mpa = self.webpackChunk_example_mpa || []).push([
  [503],
  { 881: function (ln, k, ne) { ... } },
]);

Mako 目前的 chunksIdToUrlMap 是套在 runtime 的闭包里的，需要有类似 webpack namespace 的机制暴露出来，改动点：

1. 根据 package.json 生成 namespace key
2. shared chunk 的 runtime 代码中把自己的 modules 追加到 namespace 中，需要注意的是，多个 entry 的 namespace 是同一个，是不需要区分的

任务拆分

• Runtime 相关 @PeachScript
  • runtime module registry 支持通过全局 namespace 注册新模块，类似 self.mako_modules_pkg_name，在 entry 初始化时自动注册 namespace 中的已有模块，以支持 shared chunk 先于 entry 加载的场景
    • 关键位置：

      mako/crates/mako/templates/app_runtime.stpl

      Lines 270 to 290 in 6ff7123

      	<% if has_dynamic_chunks { %>
      	var jsonpCallback = function (data) {
      	var installedChunks = requireModule.jsonpInstalled;
      	var chunkIds = data[0];
      	var modules = data[1];
      	if (
      	chunkIds.some(function (id) {
      	return installedChunks[id] !== 0;
      	})
      	) {
      	registerModules(modules);
      	}
      	for (var i = 0; i < chunkIds.length; i++) {
      	var id = chunkIds[i];
      	if (installedChunks[id]) {
      	installedChunks[id][0]();
      	}
      	installedChunks[id] = 0;
      	}
      	};
      	<% } %>

    • Webpack 实现：https://github.com/webpack/webpack/blob/87660921808566ef3b8796f8df61bd79fc026108/lib/web/JsonpChunkLoadingRuntimeModule.js#L462
  • runtime module registry 支持 push 时自动注册模块，并且将 async chunk 中的 jsonpCallback 调用也换成 push 的形式，使得 shared chunk 和 async chunk 可以用同一套
    • 关键位置：

      mako/crates/mako/src/chunk_pot/str_impl.rs

      Line 124 in 1cd1e92

      r#"globalThis.jsonpCallback([["{}"],

    • Webpack 实现：https://github.com/webpack/webpack/blob/87660921808566ef3b8796f8df61bd79fc026108/lib/web/JsonpChunkLoadingRuntimeModule.js#L463
  • runtime map 数据生成区分 entry，每个 entry 的 map 只包含自己用到的 chunk
    • 关键位置：

      mako/crates/mako/src/generate_chunks.rs

      Line 72 in 98b38ef

      let (js_chunk_map, css_chunk_map) = Self::chunk_maps(&non_entry_chunk_files);

• Code Splitting 相关 @PeachScript
  • 支持为 OptimizeAllowChunks::Entry 的 optimize_info 对象生成 entry chunk
    • 关键位置：

      mako/crates/mako/src/optimize_chunk.rs

      Line 401 in a93c482

      chunk_type: ChunkType::Sync,

  • 支持生成 shared entry chunk（不带 runtime）
    • 关键位置：

      mako/crates/mako/src/generate_chunks.rs

      Line 109 in c9121c9

      fn generate_entry_chunk_files(

  • 开放 Code Splitting 配置项，支持 enum 和 struct 两种类型，把 optimizeGroups 作为 struct 的属性，支持自定义
    • 关键位置：

      mako/crates/mako/src/config.rs

      Line 275 in 98bfb6b

      pub code_splitting: CodeSplittingStrategy,

• HTML 生成能力 讨论后发现纯配置无法满足内部框架的诉求，所以方案改为 Mako 层产出 stats.json，框架根据 stats.json 生成 HTML，这样可以高度自定义
  • [ ] 新增配置项 entryHtmlTpl: { filename: string; template: string; templateParameters: string; chunks: string[] }
    • 关键位置：

      mako/crates/mako/src/config.rs

      Line 274 in 98bfb6b

      pub hmr_host: String,

  • [ ] 在 generate 阶段根据上面的配置项和 Chunk Graph 生成对应 HTML 产物
    • 关键位置：

      mako/crates/mako/src/generate.rs

      Lines 220 to 221 in 895f571

      	let t_generate_chunks = t_generate_chunks.elapsed();

• stats.json 信息补充
  • 增加 entrypoints 字段描述 entry 和所依赖的 chunk 文件 的关系，参考 Webpack 的结构，仅提供需要的字段数量
    • 类型定义：entrypoints: { name: string; chunks: string[] }
    • 关键位置：

      mako/crates/mako/src/stats.rs

      Line 136 in 6ec55aa

      let mut stats_map = StatsJsonMap::new();

[stormslowly]

runtime 支持 shared chunk 和 entry chunk 的模块合并

xianglin 那边需要这个功能了

[PeachScript]

xianglin 那边需要这个功能了

PR 已提，快去催他 👀

[PeachScript]

主要功能已完成，可供框架接入，RFC 关闭