Merge pull request #2150 from didi/feat-rn-support-disableRequireAsync

[feat]: support web & RN disableRequireAsync

Author: hiyuki

docs-vitepress/api/compile.md

@@ -48,7 +48,7 @@ interface Rules {
 }
 ```
 
-## MpxWebpackPlugin 
+## MpxWebpackPlugin
 
 Mpx 编译构建跨平台小程序和 web 的 webpack 主插件，安装示例如下：
 
@@ -1146,7 +1146,7 @@ module.exports = defineConfig({
 
 `boolean = false`
 
-Mpx 框架在输出 微信小程序、支付宝小程序、字节小程序、Web 平台时，默认支持分包异步化能力，但若在某些场景下需要关闭该能力，可配置该项。
+Mpx 框架在输出 微信小程序、支付宝小程序、字节小程序、Web、RN 平台时，默认支持分包异步化能力，但若在某些场景下需要关闭该能力，可配置该项。
 
 ```js
 // vue.config.js
@@ -1393,7 +1393,7 @@ module.exports = defineConfig({
 
 如果创建项目时未选 unocss，需手动安装，安装示例如下：
 
-```bash 
+```bash
 npm install -D @mpxjs/unocss-plugin
 pnpm install -D @mpxjs/unocss-plugin
 yarn add -D @mpxjs/unocss-plugin
@@ -1725,7 +1725,7 @@ module.exports = defineConfig({
 
 Mpx 内置的 unocss preset，继承自 `@unocss/preset-uno`，并额外提供小程序原子类的预设样式，安装示例如下：
 
-```bash 
+```bash
 npm install -D @mpxjs/unocss-base
 pnpm install -D @mpxjs/unocss-base
 yarn add -D @mpxjs/unocss-base
@@ -1753,7 +1753,7 @@ yarn add -D @mpxjs/unocss-base
 ### baseFontSize
 
 `number = 37.5`
- 
+
 同比换算1rem = 37.5rpx适配小程序
 ```js
   // uno.config.js
@@ -1867,7 +1867,7 @@ CSS变量的前缀
 ```css
   .bg-red-500{--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));}
 ```
-  
+
 ## Request query
 
 Mpx中允许用户在request中传递特定query执行特定逻辑，目前已支持的query如下：
@@ -2068,7 +2068,7 @@ module.exports = defineConfig({
 ，如果你希望对于部分主包页面或者分包页面配置路由懒加载并想自定义Chunk Name，则可以使用该功能。
 
 ```html
-// app.mpx 
+// app.mpx
 <script type="application/json">
   {
     "pages": [

docs-vitepress/guide/platform/rn.md

@@ -2652,11 +2652,11 @@ webviewBridge.invoke('getTime', {
 })
 ```
 
-#### 异步分包
+#### 分包与异步分包
 
-Mpx转RN实现了和微信小程序同等能力的分包异步化功能，基本使用可[参考文档](https://www.mpxjs.cn/guide/advance/async-subpackage.html)
+Mpx转RN实现了和微信小程序同等能力的分包和分包异步化功能，基本使用可[参考文档](https://www.mpxjs.cn/guide/advance/async-subpackage.html)
 
-在异步分包的能力实现当中我们借助了RN宿主提供的分包下载执行/分包拉取的 api，因此在你的应用开始使用异步分包的功能之前需要在运行时代码提前部署好RN宿主容器提供的相关 api 以供 Mpx 应用使用：
+在分包和异步分包的能力实现当中我们借助了RN宿主提供的分包下载执行/分包拉取的 api，因此在你的应用开始使用异步分包的功能之前需要在运行时代码提前部署好RN宿主容器提供的相关 api 以供 Mpx 应用使用：
 
 ```javascript
 mpx.config.rnConfig.loadChunkAsync = function (config) {
@@ -2736,7 +2736,25 @@ module.exports = defineConfig({
   })
 </script>
 ```
+关闭输出 RN 分包与异步分包能力：
 
+在输出 RN 时，框架默认开启了分包与异步分包能力，如果不希望开启，可以在编译配置中通过 `rnConfig.supportSubpackage = false` 关闭：
+
+```javascript
+// mpx.config.js
+module.exports = defineConfig({
+  pluginOptions: {
+    mpx: {
+      plugin: {
+        ...
+        rnConfig: {
+          supportSubpackage: false
+        }
+      }
+    }
+  }
+})
+```
 
 #### 分享
 

packages/webpack-plugin/lib/index.js

@@ -199,6 +199,7 @@ class MpxWebpackPlugin {
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
     options.rnConfig = options.rnConfig || {}
+    options.rnConfig.supportSubpackage = options.rnConfig.supportSubpackage !== undefined ? options.rnConfig.supportSubpackage : true
     options.partialCompileRules = options.partialCompileRules || null
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
@@ -783,7 +784,7 @@ class MpxWebpackPlugin {
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
-          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || isReact(this.options.mode)),
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || (isReact(this.options.mode) && this.options.rnConfig.supportSubpackage)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {

packages/webpack-plugin/lib/react/processScript.js

@@ -46,7 +46,8 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
     const componentsMap = buildComponentsMap({
       localComponentsMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, pagesMap, firstPage, hasApp })
     output += getRequireScript({ ctorType, script, loaderContext })
@@ -58,7 +59,8 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
       localComponentsMap,
       builtInComponentsMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
 
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics, hasApp })

packages/webpack-plugin/lib/react/script-helper.js

@@ -59,7 +59,7 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
-    if (pageCfg.async) {
+    if (pageCfg.async && rnConfig.supportSubpackage) {
       const moduleId = mpx.getModuleId(pageCfg.resource)
       const getFallback = rnConfig.asyncChunk && rnConfig.asyncChunk.fallback && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.fallback, { isComponent: true })), 'PageFallback'))
       const getLoading = rnConfig.asyncChunk && rnConfig.asyncChunk.loading && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.loading, { isComponent: true })), 'PageLoading'))
@@ -81,14 +81,14 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
   }
 }
 
-function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig, rnConfig }) {
   const componentsMap = {}
   const mpx = loaderContext.getMpx()
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      if (componentCfg.async) {
+      if (componentCfg.async && rnConfig.supportSubpackage) {
         const moduleId = mpx.getModuleId(componentCfg.resource)
         const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
         let getFallback