学院网站的系统建设方式,wordpress 微博同步插件,微网站建设的现状,wordpress快站平台背景
随着SPA大规模的应用#xff0c;紧接着就带来一个新问题#xff1a;一个规模化应用需要拆分。
一方面功能快速增加导致打包时间成比例上升#xff0c;而紧急发布时要求是越短越好#xff0c;这是矛盾的。另一方面当一个代码库集成了所有功能时#xff0c;日常协作绝…背景
随着SPA大规模的应用紧接着就带来一个新问题一个规模化应用需要拆分。
一方面功能快速增加导致打包时间成比例上升而紧急发布时要求是越短越好这是矛盾的。另一方面当一个代码库集成了所有功能时日常协作绝对是非常困难的。而且最近十多年前端技术的发展是非常快的每隔两年就是一个时代导致同志们必须升级项目甚至于换一个框架。但如果大家想在一个规模化应用中一个版本做好这件事基本上是不可能的。
最早的解决方案是采用iframe的方法根据功能主要模块拆分规模化应用子应用之间使用跳转。但这个方案最大问题是导致页面重新加载和白屏。
那有什么好的解决方案呢微前端这样具有跨应用的解决方案在此背景下应运而生了
微前端的概念
微前端是什么微前端是一种类似于微服务的架构是一种由独立交付的多个前端应用组成整体的架构风格将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用而在用户看来仍然是内聚的单个产品。有一个基座应用主应用来管理各个子应用的加载和卸载。 所以微前端不是指具体的库不是指具体的框架不是指具体的工具而是一种理想与架构模式。
微前端的核心三大原则就是独立运行、独立部署、独立开发
微前端的优势
采用微前端架构的好处就是将这些小型应用融合为一个完整的应用或者将原本运行已久、没有关联的几个应用融合为一个应用可以将多个项目融合为一又可以减少项目之间的耦合提升项目扩展性。
实现微前端的几种方式
从single-spa到qiankun基于WebComponent的micro-appwebpack5实现的Module Federation
微前端框架的分类
Single-spa
single-spa是一个很好的微前端基础框架而qiankun框架就是基于single-spa来实现的在single-spa的基础上做了一层封装也解决了single-spa的一些缺陷。
首先我们先来了解该如何使用single-spa来完成微前端的搭建。 Single-spa实现原理
首先在基座应用中注册所有App的路由single-spa保存各子应用的路由映射关系充当微前端控制器Controler。URL响应时匹配子应用路由并加载渲染子应用。上图便是对single-spa完整的描述。
有了理论基础接下来我们来看看代码层面时如何使用的。
以下以Vue工程为例基座构建single-spa,在Vue工程入口文件main.js完成基座的配置。
基座配置
//main.js
import Vue from vue
import App from ./App.vue
import router from ./router
import { registerApplication, start } from single-spa
Vue.config.productionTip false
const mountApp (url) {return new Promise((resolve, reject) {const script document.createElement(script)script.src urlscript.onload resolvescript.onerror reject// 通过插入script标签的方式挂载子应用const firstScript document.getElementsByTagName(script)[0]// 挂载子应用firstScript.parentNode.insertBefore(script, firstScript)})
}
const loadApp (appRouter, appName) {// 远程加载子应用return async () {//手动挂载子应用await mountApp(appRouter /js/chunk-vendors.js)await mountApp(appRouter /js/app.js)// 获取子应用生命周期函数return window[appName]}
}
// 子应用列表
const appList [{// 子应用名称name: app1,// 挂载子应用app: loadApp(http://localhost:8083, app1),// 匹配该子路由的条件activeWhen: location location.pathname.startsWith(/app1),// 传递给子应用的对象customProps: {}},{name: app2,app: loadApp(http://localhost:8082, app2),activeWhen: location location.pathname.startsWith(/app2),customProps: {}}
]
// 注册子应用
appList.map(item {registerApplication(item)
})// 注册路由并启动基座
new Vue({router,mounted() {start()},render: h h(App)
}).$mount(#app)
复制代码
构建基座的核心是配置子应用信息通过registerApplication注册子应用在基座工程挂载阶段start启动基座。
子应用配置
import Vue from vue
import App from ./App.vue
import router from ./router
import singleSpaVue from single-spa-vue
Vue.config.productionTip false
const appOptions {el: #microApp,router,render: h h(App)
}
// 支持应用独立运行、部署不依赖于基座应用
// 如果不是微应用环境即启动自身挂载的方式
if (!process.env.isMicro) {delete appOptions.elnew Vue(appOptions).$mount(#app)
}
// 基于基座应用导出生命周期函数
const appLifecycle singleSpaVue({Vue,appOptions
})
// 抛出子应用生命周期
// 启动生命周期函数
export const bootstrap (props) {console.log(app2 bootstrap)return appLifecycle.bootstrap(() { })
}
// 挂载生命周期函数
export const mount (props) {console.log(app2 mount)return appLifecycle.mount(() { })
}
// 卸载生命周期函数
export const unmount (props) {console.log(app2 unmount)return appLifecycle.unmount(() { })
}
复制代码
配置子应用为umd打包方式
//vue.config.js
const package require(./package.json)
module.exports {// 告诉子应用在这个地址加载静态资源否则会去基座应用的域名下加载publicPath: //localhost:8082,// 开发服务器devServer: {port: 8082},configureWebpack: {// 导出umd格式的包在全局对象上挂载属性package.name基座应用需要通过这个// 全局对象获取一些信息比如子应用导出的生命周期函数output: {// library的值在所有子应用中需要唯一library: package.name,libraryTarget: umd}}
复制代码
配置子应用环境变量
// .env.micro
NODE_ENVdevelopment
VUE_APP_BASE_URL/app2
isMicrotrue
复制代码
子应用配置的核心是用singleSpaVue生成子路由配置后必须要抛出其生命周期函数。
用以上方式便可轻松实现一个简单的微前端应用了。
那么我们有single-spa这种微前端解决方案为什么还需要qiankun呢
相比于single-spaqiankun他解决了JS沙盒环境不需要我们自己去进行处理。在single-spa的开发过程中我们需要自己手动的去写调用子应用JS的方法如上面的 createScript方法而qiankun不需要乾坤只需要你传入响应的apps的配置即可会帮助我们去加载。
Qiankun
Qiankun的优势
基于 single-spa[1] 封装提供了更加开箱即用的 API。技术栈无关任意技术栈的应用均可 使用/接入不论是 React/Vue/Angular/JQuery 还是其他等框架。HTML Entry 接入方式让你接入微应用像使用 iframe 一样简单。样式隔离确保微应用之间样式互相不干扰。JS 沙箱确保微应用之间 全局变量/事件 不冲突。资源预加载在浏览器空闲时间预加载未打开的微应用资源加速微应用打开速度。
基座配置
import { registerMicroApps, start } from qiankun;
registerMicroApps([{name: reactApp,entry: //localhost:3000,container: #container,activeRule: /app-react,},{name: vueApp,entry: //localhost:8080,container: #container,activeRule: /app-vue,},{name: angularApp,entry: //localhost:4200,container: #container,activeRule: /app-angular,},
]);
// 启动 qiankun
start();
复制代码
子应用配置
以 create react app 生成的 react 16 项目为例搭配 react-router-dom 5.x。
1.在 src 目录新增 public-path.js解决子应用挂载时访问静态资源冲突
if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}
复制代码
2.设置 history 模式路由的 base
BrowserRouter basename{window.__POWERED_BY_QIANKUN__ ? /app-react : /}
复制代码
3.入口文件 index.js 修改为了避免根 id #root 与其他的 DOM 冲突需要限制查找范围。
import ./public-path;import React from react;import ReactDOM from react-dom;import App from ./App;function render(props) {const { container } props;ReactDOM.render(App /, container ? container.querySelector(#root) : document.querySelector(#root));}if (!window.__POWERED_BY_QIANKUN__) {render({});}export async function bootstrap() {console.log([react16] react app bootstraped);}export async function mount(props) {console.log([react16] props from main framework, props);render(props);}export async function unmount(props) {const { container } props;ReactDOM.unmountComponentAtNode(container ? container.querySelector(#root) : document.querySelector(#root));}
复制代码
4.修改 webpack 配置
安装插件 rescripts/cli当然也可以选择其他的插件例如 react-app-rewired。
npm i -D rescripts/cli
复制代码
根目录新增 .rescriptsrc.js
const { name } require(./package);
module.exports {webpack: (config) {config.output.library ${name}-[name];config.output.libraryTarget umd;config.output.jsonpFunction webpackJsonp_${name};config.output.globalObject window;return config;},devServer: (_) {const config _;config.headers {Access-Control-Allow-Origin: *,};config.historyApiFallback true;config.hot false;config.watchContentBase false;config.liveReload false;return config;},
};
复制代码
以上对Qiankun的使用可以看出与single-spa使用过程很相似。不同的是Qiankun的使用过程更简便了。一些内置的操作交由给Qiankun内部实现。这是一种IOC思想的实现我们只管面向容器化开发其他操作交给Qiankun框架管理。
Micro-app
micro-app并没有沿袭single-spa的思路而是借鉴了WebComponent的思想通过CustomElement结合自定义的ShadowDom将微前端封装成一个类WebComponent组件从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性micro-app不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴露出方法也不需要修改webpack配置是目前市面上接入微前端成本最低的方案。
WebComponent的概念
WebComponent[2]是HTML5提供的一套自定义元素的接口WebComponent[3]是一套不同的技术允许您创建可重用的定制元素它们的功能封装在您的代码之外并且在您的 web 应用中使用它们。以上是MDN社区对WebComponent的解释。
Custom elements自定义元素 一组 JavaScript API允许您定义 custom elements 及其行为然后可以在您的用户界面中按照需要使用它们。Shadow DOM影子 DOM 一组 JavaScript API用于将封装的“影子”DOM 树附加到元素与主文档 DOM 分开呈现并控制其关联的功能。通过这种方式您可以保持元素的功能私有这样它们就可以被脚本化和样式化而不用担心与文档的其他部分发生冲突。HTML templatesHTML 模板template 和 slot 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
接下来用一个小例子更快来理解WebComponent的概念。
一个存在组件内交互的WebComponent
/// 基于HTMLElement自定义组件元素
class CounterElement extends HTMLElement {// 在构造器中生成shadow节点constructor() {super();this.counter 0;// 打开影子节点// 影子节点是为了隔离外部元素的影响const shadowRoot this.attachShadow({ mode: open });// 定义组件内嵌样式const styles #counter-increment {width: 60px;height: 30px;margin: 20px;background: none;border: 1px solid black;};// 定义组件HTMl结构shadowRoot.innerHTML style${styles}/styleh3Counter/h3slot namecounter-contentButton/slotspan idcounter-value; 0 /span;button idcounter-increment /button;// 获取号按钮及数值内容this.incrementButton this.shadowRoot.querySelector(#counter-increment);this.counterValue this.shadowRoot.querySelector(#counter-value);// 实现点击组件内事件驱动this.incrementButton.addEventListener(click, this.decrement.bind(this));}increment() {this.counterthis.updateValue();}// 替换counter节点内容达到更新数值的效果updateValue() {this.counterValue.innerHTML this.counter;}
}
// 在真实dom上生成自定义组件元素
customElements.define(counter-element, CounterElement);
复制代码
有了对WebComponent的理解接下来我们更明白了Micro-app的优势。
micro-app的优势 使用简单 我们将所有功能都封装到一个类WebComponent组件中从而实现在基座应用中嵌入一行代码即可渲染一个微前端应用。 同时micro-app还提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的功能。零依赖micro-app没有任何依赖这赋予它小巧的体积和更高的扩展性。兼容所有框架 为了保证各个业务之间独立开发、独立部署的能力micro-app做了诸多兼容在任何技术框架中都可以正常运行。
基座的简易配置
基座存在预加载子应用、父子应用通信、公共文件共享等等
// index.js
import React from react
import ReactDOM from react-dom
import App from ./App
import microApp from micro-zoe/micro-app
const appName my-app
// 预加载
microApp.preFetch([{ name: appName, url: xxx }
])
// 基座向子应用数据通信
microApp.setData(appName, { type: 新的数据 })
// 获取指定子应用数据
const childData microApp.getData(appName)
microApp.start({// 公共文件共享globalAssets: {js: [js地址1, js地址2, ...], // js地址css: [css地址1, css地址2, ...], // css地址}
})
复制代码
分配一个路由给子应用
// router.js
import { BrowserRouter, Switch, Route } from react-router-dom
export default function AppRoute () {return (BrowserRouterSwitchRoute path/micro-app nameapp1 urlhttp://localhost:3000/ baseroute//micro-app/Route/Switch/BrowserRouter)
}
复制代码
子应用的简易配置
// index.js
import React from react
import ReactDOM from react-dom
import App from ./App
import microApp from micro-zoe/micro-app
const appName my-app
// 子应用运行时切换静态资源访问路径
if (window.__MICRO_APP_ENVIRONMENT__) {__webpack_public_path__ window.__MICRO_APP_PUBLIC_PATH__
}
// 基子应用向基座发送数据
// dispatch只接受对象作为参数
window.microApp.dispatch({ type: 子应用发送的数据 })
// 获取基座数据
const data window.microApp.getData() // 返回基座下发的data数据
//性能优化umd模式
// 如果子应用渲染和卸载不频繁那么使用默认模式即可如果子应用渲染和卸载非常频繁建议使用umd模式
// 将渲染操作放入 mount 函数 -- 必填
export function mount() {ReactDOM.render(App /, document.getElementById(root))
}
// 将卸载操作放入 unmount 函数 -- 必填
export function unmount() {ReactDOM.unmountComponentAtNode(document.getElementById(root))
}
// 微前端环境下注册mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__) {window[micro-app-${window.__MICRO_APP_NAME__}] { mount, unmount }
} else {// 非微前端环境直接渲染mount()
}
复制代码
设置子应用路由
import { BrowserRouter, Switch, Route } from react-router-dom
export default function AppRoute () {return (// 设置基础路由子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座下发的baseroute// 如果没有设置baseroute属性则此值默认为空字符串BrowserRouter basename{window.__MICRO_APP_BASE_ROUTE__ || /}.../BrowserRouter)
}
复制代码
以上便是Micro-app的用法
Module Federation
Module Federation是Webpack5提出的概念module federation用来解决多个应用之间代码共享的问题让我们更加优雅的实现跨应用的代码共享。
MF想做的事和微前端想解决的问题是类似的把一个应用进行拆分成多个应用每个应用可独立开发独立部署一个应用可以动态加载并运行另一个应用的代码并实现应用之间的依赖共享。
为了实现这样的功能 MF在设计上提出了这几个核心概念。
Container
一个被 ModuleFederationPlugin 打包出来的模块被称为 Container。通俗点讲就是如果我们的一个应用使用了 ModuleFederationPlugin 构建那么它就成为一个 Container它可以加载其他的 Container可以被其他的 Container 所加载。
HostRemote
从消费者和生产者的角度看 ContainerContainer 又可被称作 Host 或 Remote。
Host消费方它动态加载并运行其他 Container 的代码。
Remote提供方它暴露属性如组件、方法等供 Host 使用
可以知道这里的 Host 和 Remote 是相对的因为 一个 Container 既可以作为 Host也可以作为 Remote。
Shared
一个 Container 可以 Shared 它的依赖如 react、react-dom给其他 Container 使用也就是共享依赖。 以上是webpack5与之前版本的模块管理对比图
微应用配置
通过webpack5的配置达成微应用的效果
// 配置webpack.config.js
const { ModuleFederationPlugin } require(webpack).container;
new ModuleFederationPlugin({name: appA,//出口文件filename: remoteEntry.js,//暴露可访问的组件exposes: {./input: ./src/input,},//或者其他模块的组件//如果把这一模块当作基座模块的话//这里应该配置其他子应用模块的入口文件remotes: {appB: appBhttp://localhost:3002/remoteEntry.js,},//共享依赖其他模块不需要再次下载便可使用shared: [react, react-dom],
})
复制代码
以上便是我对微应用架构的理解以及微应用架构技术的演变过程。不难看出这些技术的演变都朝着易用性和可拓展性的方向演进。其中技术也有其时代的局限性不过思想和技术总是在不断进步的。这几类技术选型都有其优缺点各有千秋我们可以根据不同的需要选择不同的技术来构建应用。
下列是本文写作时的参考资料
single-spa: http://zh-hans.single-spa.js.org/docs/gettin…[4]
qiankun: http://qiankun.umijs.org/zh/guide[5]
WebComponent: http://developer.mozilla.org/zh-CN/docs/…[6]
micro-app: http://cangdu.org/micro-app/d…[7]
原文链接
本文为阿里云原创内容未经允许不得转载。
