rspeedy-module-bridge-plugin

功能介绍

• 打包 ReactLynx LazyBundle 时从 chunk 中剔除指定的 NPM 包，并从 globalThis 中桥接此模块以减少打包体积。
• 解决打包 ReactLynx LazyBundle 时注入的 webpack Runtime 导致的 NPM 包多实例问题。

使用说明

环境要求

@lynx-js/rspeedy >=0.11.0

生成模块依赖图

在 LazyBundle 的 lynx.config.js 中引入 ModuleBridgePlugin 插件，并配置需要需要桥接的 NPM 模块。

import { defineConfig } from '@lynx-js/rspeedy'
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
import { ModuleBridgePlugin } from 'rspeedy-module-bridge-plugin'
export default defineConfig({
  plugins: [
    pluginReactLynx({
      experimental_isLazyBundle: true,
    }),
    ModuleBridgePlugin({
      moduleList: ['lodash-es'],
    })
  ],
})

在 LazyBundle 工程中执行下述命令以生成 .virtual-module.json。

GEN_GRAPH=true rspeedy build

或者

export GEN_GRAPH=true
rspeedy build
unset GEN_GRAPH

模块注入和桥接

按照 Lynx 官方文档指引，分别在 LazyBundle 和 Card 工程中执行构建命令。

rspeedy build

参考案例

// node_modules/lynx-test/index.js
const target = { name : 1 }
export const setTarget = (v: number) => {
    target.name = v
}
export default target

// index.tsx
import {root, lazy, Suspense, useMemo} from '@lynx-js/react'
import target, { setTarget } from "lynx-test";
const App = lazy(() => import('http://127.0.0.1:3000/dynamic.lynx.bundle',{ with: { type: 'component'} }))
const Page = ()=> {
    useMemo(() => {
        setTarget(2)
    }, []);
    return (<Suspense fallback={<view>Loading...</view>}>
        <text>parents target's name is {target.name}</text>
        <App />
    </Suspense>)
}
root.render(<Page />)

// App.tsx
import target from "lynx-test";
function App() {
  // 在 LynxView 中 此次显示：'hello world ~ 2'
  return (<text >hello world ~ {target.name}</text>)
}
export default App