diff --git a/.agents/skills/mpx2rn/references/rn-json-reference.md b/.agents/skills/mpx2rn/references/rn-json-reference.md index 7474ed5c37..d9bbd1cca3 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.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 905a6b3e38..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'), diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index c6d730fab7..0ac41e7fb6 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/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]) : [] @@ -1306,10 +1308,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 }