From d902e9c4ebcd2fb52a1ec48c4c049a176c74bfb5 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Thu, 27 Aug 2026 21:18:18 +0800 Subject: [PATCH 1/2] [feat]support rn asyncCommonSubpackage --- .../mpx2rn/references/rn-json-reference.md | 4 +++- docs-vitepress/api/compile.md | 22 +++++++++++++++++++ packages/webpack-plugin/lib/index.js | 5 +++-- 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/.agents/skills/mpx2rn/references/rn-json-reference.md b/.agents/skills/mpx2rn/references/rn-json-reference.md index 408792a705..80caa3bfc6 100644 --- a/.agents/skills/mpx2rn/references/rn-json-reference.md +++ b/.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` 中设置 **`asyncCommonSubpackage: false`**，则不再单独输出该分包，公共模块合并进 app 主入口 bundle（**RN 与 Web 输出下均生效**），可省去一次 `async-common` 异步下载。 + 概念与写法与官方 [分包异步化 - 跨分包自定义组件](https://mpxjs.cn/guide/advance/async-subpackage.html) 一致；**微信、支付宝、Web、RN** 等环境下框架对该能力有支持（非支持端会自动降级）。 **示例：** @@ -472,4 +474,4 @@ loadUtil().then((mod) => { } } } -``` \ No newline at end of file +``` diff --git a/docs-vitepress/api/compile.md b/docs-vitepress/api/compile.md index fb28db5b57..1a1ddc1fde 100644 --- a/docs-vitepress/api/compile.md +++ b/docs-vitepress/api/compile.md @@ -1247,6 +1247,28 @@ module.exports = defineConfig({ * 本功能只会对使用require.async异步引用的js模块生效，若引用路径中已配置?root，则以路径中?root优先 ::: +### asyncCommonSubpackage + +`boolean = true` + +在 Web 与 RN 输出中，控制被多个异步分包共享的公共模块如何输出： + +- 为 `true`（默认）时，公共模块由 `SplitChunksPlugin` 的 `async` cacheGroup 抽取到 `async-common/index.js`，运行时按需加载。 +- 为 `false` 时，公共模块直接合并进 app 主入口 chunk，不再输出 `async-common/index.js`，异步分包可直接复用主包中的公共模块。 + +```js +// mpx.config.js +module.exports = defineConfig({ + pluginOptions: { + mpx: { + plugin: { + asyncCommonSubpackage: false + } + } + } +}) +``` + ### transSubpackageRules `Array` diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 22abd6d118..bb8448317a 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -207,6 +207,7 @@ class MpxWebpackPlugin { options.forceMainPackageRules = options.forceMainPackageRules || {} options.forceProxyEventRules = options.forceProxyEventRules || {} options.disableRequireAsync = options.disableRequireAsync || false + options.asyncCommonSubpackage = options.asyncCommonSubpackage !== undefined ? options.asyncCommonSubpackage : true options.miniNpmPackages = options.miniNpmPackages || [] options.normalNpmPackages = options.normalNpmPackages || [] options.fileConditionRules = options.fileConditionRules || { @@ -1314,8 +1315,8 @@ class MpxWebpackPlugin { } if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) { splitChunksOptions.cacheGroups.async = { - chunks: 'async', - name: 'async-common/index', + chunks: this.options.asyncCommonSubpackage ? 'async' : 'all', + name: this.options.asyncCommonSubpackage ? 'async-common/index' : mpx.appInfo.name, minChunks: 2, minSize: 1 } From 526c1130b43fe905b63a323e73a04015d59edea4 Mon Sep 17 00:00:00 2001 From: xiaolei <1017653702@qq.com> Date: Fri, 4 Sep 2026 19:50:42 +0800 Subject: [PATCH 2/2] [chore]support webConfig&rnConfig asyncCommonSubpackage --- .../mpx2rn/references/rn-json-reference.md | 2 +- docs-vitepress/api/compile.md | 43 +++++++++---------- packages/webpack-plugin/lib/index.js | 15 ++++--- 3 files changed, 32 insertions(+), 28 deletions(-) diff --git a/.agents/skills/mpx2rn/references/rn-json-reference.md b/.agents/skills/mpx2rn/references/rn-json-reference.md index 71534bf80f..d9bbd1cca3 100644 --- a/.agents/skills/mpx2rn/references/rn-json-reference.md +++ b/.agents/skills/mpx2rn/references/rn-json-reference.md @@ -185,7 +185,7 @@ mpx.navigateTo({ 跨分包使用其他分包内的自定义组件时，需在 **`usingComponents`** 的路径上声明 **`?root=对方分包名`**，并在 **`componentPlaceholder`** 中指定**已在本包 `usingComponents` 注册**的同步占位组件或基础组件（如 view / text 等）；占位组件本身不能再标记为异步。构建侧需开启 **`mpx.config.rnConfig.supportSubpackage`**，并可配置 `asyncChunk.loading` / `fallback` 等。 -被多个异步分包共享的公共 JS 模块默认由构建抽取为独立的 `async-common` 分包并按需懒加载；若在 `mpx.config.js` 的 `pluginOptions.mpx.plugin` 中设置 **`asyncCommonSubpackage: false`**，则不再单独输出该分包，公共模块合并进 app 主入口 bundle（**RN 与 Web 输出下均生效**），可省去一次 `async-common` 异步下载。 +被多个异步分包共享的公共 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** 等环境下框架对该能力有支持（非支持端会自动降级）。 diff --git a/docs-vitepress/api/compile.md b/docs-vitepress/api/compile.md index 1676409ce2..2653d6b867 100644 --- a/docs-vitepress/api/compile.md +++ b/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 | 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'), @@ -1249,28 +1270,6 @@ module.exports = defineConfig({ * 本功能只会对使用require.async异步引用的js模块生效，若引用路径中已配置?root，则以路径中?root优先 ::: -### asyncCommonSubpackage - -`boolean = true` - -在 Web 与 RN 输出中，控制被多个异步分包共享的公共模块如何输出： - -- 为 `true`（默认）时，公共模块由 `SplitChunksPlugin` 的 `async` cacheGroup 抽取到 `async-common/index.js`，运行时按需加载。 -- 为 `false` 时，公共模块直接合并进 app 主入口 chunk，不再输出 `async-common/index.js`，异步分包可直接复用主包中的公共模块。 - -```js -// mpx.config.js -module.exports = defineConfig({ - pluginOptions: { - mpx: { - plugin: { - asyncCommonSubpackage: false - } - } - } -}) -``` - ### transSubpackageRules `Array` diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index a8a54a4177..0ac41e7fb6 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -209,7 +209,6 @@ class MpxWebpackPlugin { options.forceMainPackageRules = options.forceMainPackageRules || {} options.forceProxyEventRules = options.forceProxyEventRules || {} options.disableRequireAsync = options.disableRequireAsync || false - options.asyncCommonSubpackage = options.asyncCommonSubpackage !== undefined ? options.asyncCommonSubpackage : true options.miniNpmPackages = options.miniNpmPackages || [] options.normalNpmPackages = options.normalNpmPackages || [] options.fileConditionRules = options.fileConditionRules || { @@ -221,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]) : [] @@ -1307,10 +1308,14 @@ class MpxWebpackPlugin { } needInit = true } - if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) { - splitChunksOptions.cacheGroups.async = { - chunks: this.options.asyncCommonSubpackage ? 'async' : 'all', - name: this.options.asyncCommonSubpackage ? 'async-common/index' : mpx.appInfo.name, + 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 }