React远程组件

news2024/10/16 10:34:07

什么是远程组件？

远程组件指的是从远程服务器动态加载的组件，这些组件可以是React、Vue等框架的组件。

为什么需要远程组件

本质上就是为了解决复用问题，那引出新的问题有几种公共项目代码复用方式？

Git仓库

将公共代码单独抽到一个仓库去维护
优点如下
版本控制：可以精确控制每个子模块的版本，避免不同项目使用不同版本的共同代码。
独立性：子模块可以独立于主项目进行开发和发布。
清晰结构：项目结构清晰，易于管理和理解。
缺点如下
管理复杂：每次都需要手动更新。

npm包

发布到仓库中，需要的项目npm install
缺点：每次更新版本都需要重新publish

Monorepo

优点
统一管理：所有相关项目都在同一个仓库中，便于统一管理和版本控制。
原子提交：可以进行跨项目的原子提交，确保所有相关更改都是一致的。
代码共享：共享代码可以直接引用，无需额外的包管理或子模块配置。
缺点
仓库大小：单个仓库可能会变得非常大，影响克隆和拉取的速度。
复杂性：需要更复杂的工具和流程来管理大型仓库，如 Lerna、Nx 等。
权限管理：需要更细致的权限管理，确保不同团队成员只能访问他们需要的部分。

使用场景

有些公共组件会频繁的根据需求变更，对于多个项目共用的组件库来说，修改组件其影响范围是不可控的。此外，每次修改公共代码后需要更新版本，有时候可能只是个很小的更新没必要更新整个代码库版本。
因此对于某个经常需要迭代的公共代码/组件可以单独打包放到CDN上动态加载。

优点

1、方便的版本控制。多个项目依赖不同版本，可以打包多分放到CDN上，对应项目加载即可；
2、高效率。通过动态加载，可以在不重新构建和部署整个应用的情况下，更新和扩展前端功能，用户体验也好，可保证用户体验到最新的代码；
3、代码复用，多个项目使用可以有加载；

缺点

1、需要请求对应文件，如果组件太大，加载速度就会慢；
2、如果组件服务崩溃，可能导致组件加载错误，从而使整个业务不可用；

简陋版代码展示

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <RemoteComponent  name='YuButton'>Click Me</RemoteComponent>
        <RemoteComponent  name='YuText' Items={[{label:'label', content:"12312"}]}>Click Me</RemoteComponent>
        <RemoteComponent  name='YuText1' Items={[{label:'label', content:"12312"}]}>Click Me</RemoteComponent>
      </header>
    </div>
  );
}

const RemoteComponent = ({name, children, ...props}) => {
  const Component = useMemo(() => {
    return React.lazy(() => fetchComponent(name))
  }, [name])

  return (
    <Suspense
      fallback={
        <div style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
          <span style={{fontSize: 50}}>Loading...</span>
        </div>
      }>
      <Component {...props}>{children}</Component>
    </Suspense>
  )
}

const fetchComponent = async (name) => {
  const text = await fetch(
    `/index.umd.js?ts=${Date.now()}` // 将打包的放到CDN上，这里填写CDN的地址加载这个打包后的js文件
  ).then((res) => {
    if (!res.ok) {
      throw new Error('Network response was not ok')
    }
    return res.text()
  })
  const module = getParsedModule(text, name)
  if(Object.keys(module.exports).includes(name)){
    return {default: module.exports[name]} // 这里我们可以得到打包后的组件
  }
  return {default: ()=> <div style={{color:'red'}}>加载失败</div>}
}

const packages = { // 需要什么包传什么包(为了减小打包体积)，或者在打包的时候将这些需要的包一起打包进去
  react: React,
  'antd/es': {Button, Form}
}
const getParsedModule = (code) => {
  let module = {
    exports: {},
  }
  const require = (name) => {
    return packages[name]
  }
  Function('require, exports, module', code)(require, {}, module)// 打包UMD格式的话把这些传进去
  return module
}