前言
随着微前端和中台化的概念和实践越来越多,对于组件的复用能力要求也越来越多.
与此同时仅仅利用npm包或者代码模版的生成页面代码来做到复用性,可能在微前端的架构下也会导致不必要的无效加载和代码体积过大.
因此我们需要将我们构建输出的包大小尽可能降低到最小,让其在微服务的框架中实现功能单一.
其实对于Webpack引用三方库已经有了不少解决方案,这里我们可以利用Webpack的alias和externals 模块引用线上的第三方库.
实现一个组件库预加载的Demo
第一步:组件库的开发
我们使用Create-React-App 来开发我们的组件库
create-react-app MicroComponets
cd MicroConponents
npm run eject //暴露配置
由于我们的组件库也是采用React开发,所以我们需要将React变量暴露在全局状态下.
因此我们在template的页面中引入React的Development版本呢.
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
控制台测试一下是否挂载成功
window.React
{Children: {…}, createRef: ƒ, Component: ƒ, PureComponent: ƒ, createContext: ƒ, …}
与此同时我们可以卸载本地的react依赖
npm uninstall react
重要的是修改配置文件将react引用指向全局的window
PS: 如果有需要使用react-dom 可以另行加载
externals:{
"react":"window.React",
},
接下来我们来开发我们的组件
src/components/tips/index.jsx
import React from "react"
export function Tips(){
return (
<div>A Complex components</div>
)
}
src/components.js
export * from "./tips"
src/index.js
import * as MicroComponent from "./componets"
window['MicroComponent']=MicroComponent
这样子我们成功的将组件挂在到全局的状态下.
我们可以测试一下
我们的全局组件顺利的挂载在了全局变量Window 底下
下面我们打包一下我们的MicroComponent
需要注意的是,此时我们需要更改Create-React-App 相关配置,将runtime.js 合入主JS
配置runtimeChunk为false
runtimeChunk: false,
打包一下
yarn build
得到main.js 1.19 KB
第二步:在项目中引用全局组件库
我们继续利用Create-React-App 创建一个应用项目,并暴露配置
并且修改webpakc 配置如下
这里比组件库多引入react-dom和组件库配置
externals:{
"react":"window.React",
"react-dom":"window.ReactDOM",
"MicroComponent":"window.MicroComponent"
},
同时我们也需要项目的模版页面引入如下
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./main.js"></script>
这样子我们就可以顺利引用我们的组件库.
import { Tips } from "MicroComponent"
function App() {
return (
<div className="App">
<Tips/>
</div>
);
}
export default App;
成功引用线上组件库.
总结反思
一波操作猛如虎,费劲好大的力气才引用成功线上的组件库.
为什么不直接封装成一个NPM包,加上一句
npm install MicorComponents
就可以快速解决问题呢.
之所以这样子做,我想还是围绕着 快速高效复用 这个关键点来做的.
快速有效复用个人认为也是中台思想中最为重要的一点,数据可能是后台所需要去做共享的,那么对于前端来说来说,中台化我想也必不可少.尤其在数据的处理和可视化方法都可以做到复用.
引用线上的三方库个人认为有以下几点好处
- 减少构建包的体积,加快打包速度,基础库利用CDN加速,优化页面性能
- 在大型SPA 应用中或微前端应用中,避免基础框架环境的多次加载.如React,Vue.
- 快速统一迭代,多团队开发情况下,能够快速同步最新的基础库特性.
对于前端中台化的简单思考
前端中台化其实应该归类在技术中台的范围类.
个人认为前端中台应该做到如下几点:
1. 快速获取各类可复用的组件.
如通用UI组件/业务组件/API请求获取规范/环境信息等.
2. 快速开发.
开发者选择好需要的组件后,可以生成一个有效的开发环境包括git仓库,
未来可以生成一个线上的IDE.
3. 模块组件/业务组件快速接入平台.
支持新组件的快速接入和测试.
4. 快速部署
能够中台应用直接部署应用到开发/测试/线上环境.接管DevOps相关功能.
