Merge pull request #2575 from didi/feat-rn-asyncCommonSubpackage

[feat]support rn asyncCommonSubpackage

Author: hiyuki

.agents/skills/mpx2rn/references/rn-json-reference.md

@@ -185,6 +185,8 @@ mpx.navigateTo({
 
 跨分包使用其他分包内的自定义组件时，需在 **`usingComponents`** 的路径上声明 **`?root=对方分包名`**，并在 **`componentPlaceholder`** 中指定**已在本包 `usingComponents` 注册**的同步占位组件或基础组件（如 view / text 等）；占位组件本身不能再标记为异步。构建侧需开启 **`mpx.config.rnConfig.supportSubpackage`**，并可配置 `asyncChunk.loading` / `fallback` 等。
 
+被多个异步分包共享的公共 JS 模块默认由构建抽取为独立的 `async-common` 分包并按需懒加载；若在 `mpx.config.js` 的 `pluginOptions.mpx.plugin.rnConfig` 中设置 **`asyncCommonSubpackage: false`**，则 RN 输出不再单独生成该分包，公共模块合并进 app 主入口 bundle，可省去一次 `async-common` 异步下载。
+
 概念与写法与官方 [分包异步化 - 跨分包自定义组件](https://mpxjs.cn/guide/advance/async-subpackage.html) 一致；**微信、支付宝、Web、RN** 等环境下框架对该能力有支持（非支持端会自动降级）。
 
 **示例：**

docs-vitepress/api/compile.md

@@ -842,6 +842,16 @@ module.exports = defineConfig({
 
 为 `true` 时 **禁用** 页面切换动画；设为 **`false`** 可 **开启** 切换过渡效果。
 
+#### webConfig.asyncCommonSubpackage
+
+`boolean = true`
+
+控制 Web 输出中被多个异步分包共享的公共模块如何输出：
+
+- 为 `true`（默认）时，公共模块抽取到 `async-common/index.js`，运行时按需加载。
+- 为 `false` 时，公共模块合并进 app 主入口 chunk，不再输出 `async-common/index.js`。
+
+
 #### webConfig.customBuiltInComponents {#webconfig-custombuiltincomponents}
 
 `Record<string, string> | undefined`
@@ -871,6 +881,7 @@ module.exports = defineConfig({
     mpx: {
       plugin: {
         webConfig: {
+          asyncCommonSubpackage: false,
           transRpxFn: function (match, $1) {
             if ($1 === '0') return $1
             return `${$1 * +(100 / 750).toFixed(8)}vw`
@@ -905,6 +916,15 @@ module.exports = defineConfig({
 
 为 `true` 时，RN 输出下页面与组件可走异步分包与 `import()` 等逻辑；为 `false` 时关闭相关能力。插件初始化时若未传入则默认为 `true`。
 
+#### rnConfig.asyncCommonSubpackage
+
+`boolean = true`
+
+控制 RN 输出中被多个异步分包共享的公共模块如何输出：
+
+- 为 `true`（默认）时，公共模块抽取到 `async-common/index.js`，运行时按需加载。
+- 为 `false` 时，公共模块合并进 app 主入口 chunk，不再输出 `async-common/index.js`。
+
 #### rnConfig.asyncChunk
 
 `{ timeout?: number, fallback?: string, loading?: string } | undefined`
@@ -941,6 +961,7 @@ module.exports = defineConfig({
         rnConfig: {
           projectName: 'MyMpxApp',
           supportSubpackage: true,
+          asyncCommonSubpackage: false,
           asyncChunk: {
             timeout: 10000,
             fallback: path.resolve(__dirname, 'src/rn/PageFallback.mpx'),

packages/webpack-plugin/lib/index.js

@@ -220,8 +220,10 @@ class MpxWebpackPlugin {
       cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
+    options.webConfig.asyncCommonSubpackage = options.webConfig.asyncCommonSubpackage !== undefined ? options.webConfig.asyncCommonSubpackage : true
     options.rnConfig = options.rnConfig || {}
     options.rnConfig.supportSubpackage = options.rnConfig.supportSubpackage !== undefined ? options.rnConfig.supportSubpackage : true
+    options.rnConfig.asyncCommonSubpackage = options.rnConfig.asyncCommonSubpackage !== undefined ? options.rnConfig.asyncCommonSubpackage : true
     options.partialCompileRules = options.partialCompileRules || null
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
@@ -1309,10 +1311,14 @@ class MpxWebpackPlugin {
               }
               needInit = true
             }
-            if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
-              splitChunksOptions.cacheGroups.async = {
-                chunks: 'async',
-                name: 'async-common/index',
+            const asyncCommonSubpackage = isWeb(mpx.mode)
+              ? this.options.webConfig.asyncCommonSubpackage
+              : this.options.rnConfig.asyncCommonSubpackage
+            const cacheGroupName = asyncCommonSubpackage ? 'async' : 'mainCommon'
+            if (!hasOwn(splitChunksOptions.cacheGroups, cacheGroupName)) {
+              splitChunksOptions.cacheGroups[cacheGroupName] = {
+                chunks: asyncCommonSubpackage ? 'async' : 'all',
+                name: asyncCommonSubpackage ? 'async-common/index' : mpx.appInfo.name,
                 minChunks: 2,
                 minSize: 1
               }