Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .agents/skills/mpx2rn/references/rn-json-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -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** 等环境下框架对该能力有支持(非支持端会自动降级)。

**示例:**
Expand Down
21 changes: 21 additions & 0 deletions docs-vitepress/api/compile.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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'),
Expand Down
14 changes: 10 additions & 4 deletions packages/webpack-plugin/lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]) : []
Expand Down Expand Up @@ -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
}
Expand Down
Loading