什么是微前端？首先，我们应该知道什么是微服务。微服务是面向服务架构（Service-OrientedArchitecture，SOA）的一种变体，它将应用设计为一系列松散耦合的细粒度服务，通过轻量级的通信协议组织起来，具体来说，就是将应用构建成一组小的服务。这些服务可以独立部署和独立扩展，每个服务都有坚实的模块边界，甚至可以让不同的编程语言编写不同的服务，也可以由不同的团队管理。类比微服务，微前端也可以采用这种架构思想，将一个前端应用拆解成多个微应用，可以独立开发、测试和部署。呈现给用户的是产品，内部原理其实是多重的。应用程序的集成或内聚。微前端的核心思想每个团队可以根据自己的技术栈进行开发，每个团队之间互不干扰，节省团队之间的技术沟通成本即使每个团队使用相同的技术栈，也不应该共享variablesandstateutilizationPrefix来区分不同项目之间的CSS、BrowserAPI、WebEvents、Cookies或LocalStorage之间的冲突使用浏览器事件进行通信，而不是构建一个全局的PubSub系统。如果您确实需要构建跨团队API，请保持简单。即使JavaScript失败或未执行，Web应用程序的功能仍应正常工作。通用渲染和渐进增强可以用来提高用户的感知性能微前端有什么好处灵活性：技术栈独立，每个微应用可以是不同的技术栈渐进性：增量升级，便于项目扩展和重构独立性：每个微应用之间状态是隔离的，运行时状态是不共享的。敏捷：独立开发，独立部署。部署完成后，主框架自动完成微前端iframemulti-pageqiankun同步更新的三个实现1.iframe在需要插入的地方直接使用iframe插入需要展示的业务页面的url即可，src的路径可以是当前项目或其他项目。这种方法在PC端的效果还算可以，但是在移动端的效果就不好了。iframe的优点是简单易用，没有学习成本，缺点也很明显。对SEO不友好，适配空间有限，多次请求可能会出现性能问题。2.多页面以vue-cli搭建的项目为例。要在多页面模式下构建应用程序，每个页面都应该有一个对应的JavaScript入口文件。我们把每一个需要松耦合的项目都看作一个子项目。创建一个页面，并添加对应的入口文件page.main.js，在vue.config.js文件下进行如下配置：pages:{//配置多页入口index:{//入口1entry:'src/main.js',template:'public/index.html'},demo:{//条目2entry:'src/demo/demo.main.js',template:'public/demo.html'}}如上面代码所示，在vue项目中配??置了index和demo两个页面，对应两个main.js入口文件，当然public中也有对应的两个html文件，如图:使用多页面来实现微前端的思想是将一个Vue项目分成若干个不同的子项目，每个项目作为一个单页面应用，没有学习成本。您只需要根据实际情况创建不同的页面即可。在实际开发中，整体架构是固定的。每个团队在不同的页面下独立开发不同的模块，互不影响。团队之间唯一的交集可能就是修改vue.config.js文件的相关配置，生成demo地址。以上是示例效果，有home和demo两个页面，从home跳转到demo，或者从demo跳回到home。根据自己的场景，可以使用window.location.href或者window.location.replace在子应用之间跳转。3.qiankunqiankun是蚂蚁金服技术团队基于single-spa开发的微前端框架。整体比较方便，提供基础应用。只需在基础上注册每一个微应用，即可实现微前端架构和基础应用。微应用运行不受影响，可独立开发部署。主应用在主应用（base）中注册微应用并启动：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',},]);//启动qiankunstart();micro-app微应用不需要安装任何其他依赖来访问qiankun主应用，但是需要在微应用中做如下两个操作：1.导出对应的生命周期钩子。微应用需要在自己的入口js（比如main.js）（一般是你配置的webpack的入口js）导出bootstrap、mount、unmount三个生命周期钩子供主应用调用一个合适的时间/***bootstrap只会在微app初始化的时候被调用一次，下次微app重新进入的时候会直接调用mounthook，不会重复触发bootstrap。*通常我们可以在这里初始化一些全局变量，比如在unmount阶段不会被销毁的应用级缓存。*/exportasyncfunctionbootstrap(){console.log('reactappbootstraped');}/***每次应用进入都会调用mount方法，通常我们在这里触发应用的渲染方法*/exportasyncfunctionmount(props){ReactDOM.render(,props.container?props.container.querySelector('#root'):document.getElementById('root'));}/***应用停止/uninstalls每次都会调用的方法，通常这里我们会卸载微应用的应用实例*/exportasyncfunctionunmount(props){ReactDOM.unmountComponentAtNode(props.container?props.container.querySelector('#root'):document.getElementById('root'),);}/***可选的生命周期钩子，仅在loadMicroApp加载微应用时生效*/exportasyncfunctionupdate(props){console.log('updateprops',props);}2.配置小程序打包工具constpackageName=require('./package.json').name;module.exports={output:{library:`${packageName}-[name]`,libraryTarget:'umd',jsonpFunction:`webpackJsonp_${packageName}`,},};上面的demo地址是一个示例效果，主应用中存在两个微应用，主应用就像宿主环境中的浏览器，每个微应用内部内容的切换就像iframe一样自然参考微frontends#AWS微服务架构上的微前端架构（微服务）VueCLI-pagesqiankun
