生活分类信息网站大全,合肥画册设计公司,做系统 和网站前端,网站备案新增域名什么是远程组件#xff1f;
远程组件指的是从远程服务器动态加载的组件#xff0c;这些组件可以是React、Vue等框架的组件。
为什么需要远程组件
本质上就是为了解决复用问题#xff0c;那引出新的问题有几种公共项目代码复用方式#xff1f;
Git仓库
将公共代码单独抽…什么是远程组件
远程组件指的是从远程服务器动态加载的组件这些组件可以是React、Vue等框架的组件。
为什么需要远程组件
本质上就是为了解决复用问题那引出新的问题有几种公共项目代码复用方式
Git仓库
将公共代码单独抽到一个仓库去维护 优点如下 版本控制 可以精确控制每个子模块的版本避免不同项目使用不同版本的共同代码。 独立性 子模块可以独立于主项目进行开发和发布。 清晰结构 项目结构清晰易于管理和理解。 缺点如下 管理复杂 每次都需要手动更新。
npm包
发布到仓库中需要的项目npm install 缺点每次更新版本都需要重新publish
Monorepo
优点 统一管理 所有相关项目都在同一个仓库中便于统一管理和版本控制。 原子提交 可以进行跨项目的原子提交确保所有相关更改都是一致的。 代码共享 共享代码可以直接引用无需额外的包管理或子模块配置。 缺点 仓库大小 单个仓库可能会变得非常大影响克隆和拉取的速度。 复杂性 需要更复杂的工具和流程来管理大型仓库如 Lerna、Nx 等。 权限管理 需要更细致的权限管理确保不同团队成员只能访问他们需要的部分。
使用场景
有些公共组件会频繁的根据需求变更对于多个项目共用的组件库来说修改组件其影响范围是不可控的。此外每次修改公共代码后需要更新版本有时候可能只是个很小的更新没必要更新整个代码库版本。 因此对于某个经常需要迭代的公共代码/组件可以单独打包放到CDN上动态加载。
优点
1、方便的版本控制。多个项目依赖不同版本可以打包多分放到CDN上对应项目加载即可 2、高效率。通过动态加载可以在不重新构建和部署整个应用的情况下更新和扩展前端功能用户体验也好可保证用户体验到最新的代码 3、代码复用多个项目使用可以有加载
缺点
1、需要请求对应文件如果组件太大加载速度就会慢 2、如果组件服务崩溃可能导致组件加载错误从而使整个业务不可用
简陋版代码展示
要远程加载的组件源码写完后建议打包成umd格式。
import { Button, Form } from antd/es;
import React from react;const YuButton (props:{p_click?:()voidm_click?:()void
}){const style { marginRight: 5 };return (Button typeprimary onClick{props.p_click} style{style}主要按钮/ButtonButton typeprimary onClick{props.m_click} style{style} loading主要按钮/ButtonButton typeprimary style{style} disabled禁用/Button/);
}
const YuText (props:{Items:{label: string, content:string}[]
}){
return props?.Items?.length 0 ? (FormnamebasiclabelCol{{ span: 8 }}wrapperCol{{ span: 16 }}autoCompleteoff{props.Items.map((item){return Form.Item label{item.label}{item.content}/Form.Item})}/Form
) : div暂无数据/div
}export default {YuButton,YuText
}function App() {return (div classNameAppheader classNameApp-headerRemoteComponent nameYuButtonClick Me/RemoteComponentRemoteComponent nameYuText Items{[{label:label, content:12312}]}Click Me/RemoteComponentRemoteComponent nameYuText1 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 (Suspensefallback{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
}效果展示
