经验之谈-关于实际项目微前端优化

场景

1. 一个在某某作业为运营商供应服务的科技公司
   • 首先会开发一个关于机器各种功用的运营体系（机器中心）
   • next，要为供货商供应数据分析的体系（数据中心）
   • nehtml简单网页代码xt，为运营商供应各种促销活动（营销中心）
   • …. (业务更多，需求的处理体系也很多)

   短期之内全部用一个前运营商发号凭据是什么端项目开发，没有问题。可是当业务量不断扩展，从开前端开发需求把握产品质量法什么技能发到用户会有各种影响（当然分多个项html目也没问题，可是用户需求记产品设计住N个链接）

这么就会出现问题

开发：

• 代码量大，打包慢html标签，包体积大，时刻越长
• 整个体系的前端ui主html题欠好运营商网络什么意思处h前端框架ttps域名理
• 每一次迭代上线，影运营商是什么响面大
• 代码耦合紊乱，不敢动，牵一发何止动全身

用户：拜访会越来越慢，很简略受到开发上线影响的自己的功运营商网络什么意思用，主题千年不变等等。

考前端培训机构虑

如何将一个巨石html标签的处理体系改造拆分（各个中心的模块下面还有几十个菜单）

微前端是个啥

将前端运用分解成一些更小、更简略的能够独立开发运营商网络什么意思，检验产品质量法、安顿的小运营商客服电话是多少块，而在用户看来仍然是内聚的单个产品。
微前端的三个要素，即：独立工HTML作、独立开发（与技能栈无关，运前端面试题用之间不应该有任何直接或直接的技能栈、依托、以及完毕上的耦合）、独立安顿

优势

1. 凌乱度可控: 每一个UI业务模块能够由独立的前端团队开发,防止代码巨无霸,便于维护与开发功率运营商服务密码怎么查。
2. 独立安顿: 每一个模块可独自安顿
3. 技能选型灵敏: 在同一项目下能够运用现在市面上全部前端技能栈,也包前端开发需求学什么括未来的前端技能栈。
4. 容https和http的差异错: 单个模块发生过错,不影响全局。
5. 扩展:产品介绍 每一个服务能够独立横向扩展以满意业务伸缩性，与资源的不必要耗费；

期望改形成这运营商电话号码样

对外，看上去是一个体系。对内又能够分多个web项目

常见的完毕方法

1. 传统ifrahtmlme

• 利益：运用之间自带沙箱隔绝
• 缺点：重复加载脚本和款式
• 需求处理的问题：
  • 布局问题：iframe有必要给一个产品定位指定的高度，否则会凹陷
  • 弹窗及遮罩层问题：只能h产品经理ttps协议在iframe范前端学什么围内笔直水平居中，没法在整个产品批号是生产日期吗页面运https认证营商设置更新是什么意思笔直水平居中（可运用全局的弹窗）
  • 浏览器行进/撤退问题：iframe页面改写会重置（比方ht前端工程师ml说从列表页跳转到详情页，然后改写，会返回到列表页），由于浏览器的地址栏没有改html网页制作动（push底层进行路由跳转）
  • 每次子运运营商用进入都是一次浏览器上下文重建、资源从头加载的过运营商服务密码怎样查程。

2. 作业时组合（每运营商发号凭据是什么个子运用独立构建，作业时由主运用运运营商系统维护中为什么不能充费营商网络什么意思担任运用处理，加载，发起，卸载，通讯机运营商服务密码怎么查https域名制）

• 利益：具有杰出的体验，真html实的独立开发，独立安顿
• 缺点：凌乱，需求规划加前端和后端的区别载，通讯运营商是什么机制，无法做到彻底隔绝（依据 shadow D运营商查询OM 的款式能够完毕款式隔绝，产品设计专业比方qiankun.js），需求处理依托抵触，样前端训练组织式抵触问题

3. Web Components

   浏览器的原生组件，比较第三方结html个人网页完整代码构，原html个人网页完整代码生组件简略直接，契合直html个人网页完整代码觉，不必加载任何外部模块，代码量小（现在流行前端开发的React，Vue都是组件html标签结构）

   每个子运用需求运用 Web Components 技能编写组件或许运用结构生成

   • 利益运营商查询：面向未来的技能
   • 缺点：重构价值很大，运营商网络什么意思全部的代码需求用we前端开发b Compo产品批号是生产日期吗nhttps运营商系统维护中为什么不能充费和http的差异ents运营商服务密码怎么查重写

//MDN地址
http运营商网络什么意思s://develop产品er.mozilla.org/zh-CN/docs/Web/Web_Components

现在国内注重度比较高的技能

现在运用比较多的是作业时组合的方案。注重度和成熟度最高的应该就是 singleHTML-spa。还有国内注重度很高的蚂蚁金融的运营商设置更新是什么意思结构qiankun

qiankun 是一个出产可用的微前产品战略产品批号是生产日期吗端结构，它依据 single-spa，具有 js 沙箱、款式隔运营商是什么绝、HTML Loader、预加载 等微前端体系所需的才前端和后端的区别干。qiankun 能够用于任意 js 结构，微运用接入像嵌入一个 iframe 体系相同简略（想知道更多请去官网）

说了这么前端多，下面html是什么意思才是重点

当时有个项目遇到如下瓶颈

• 第三方js紊乱（jquery，react，运营商服务密码怎么查vue，angul前端开发ar一锅乱炖）
• 大多都是jquery代码，代码量大，阅产品生命周期读困难
• 业务特别多，页面有百来个吧
• 等等…..

（当然，不可否定，在当时，运营商电话号码这是一个架构很好的项目）

优化方产品生命周期针

在不影响本html个人网页完整代码来的项目基础的状况下优化项目，以最小改动，使之既能承继原有的才干，又契合前端开发前端培训机构需求把握什么技能现在的开发习气和技能方向（注产品经理入微服务的思维）

处理方法

针对这个项目iframe方案是接入本钱最廉价的挑选，一起也支撑经过possMassage完毕父子之间的通讯。而且，关于陈年已久的Jquery多页面的老项目，产品介绍qiankun对多页运用没有很好的处理方法。每个页面都去修改，本钱很大也很html标签费事，可是运用 iframe 嵌入这些老前端开发需要学什么项目就比较便当。
（新建两个子项目vue/react各一个，在本来的架构产品经理下，开发拜访运营商设置更新是什html是什么意思么意思）

需求产品生命周期处理的问题：产品定位

1. 运用iframe，而且路由中以 “#/iframe” 最初即可拜访并躲藏其他的内容，分隔iframe与原有的内容的而且经过闪现躲html5藏进行切换
2. 处理拜访关运营商网络什么意思系，即本地开发和线上拜访（线上访产品运营问打包后的内容，线下拜访本地能热更前端学什么新代码）本地拜访地址（主动运营商是什么截取ifram运营商电话号码e后边的url并拜访）

//本地
http:html网页制作//localhost:8080/main/index.html/前端开发#/iframe/http://localhost:3001https和http的区别
//线html个人网页完整代码上拜访地址(l前端和后端哪个工资高ocalhost改为ip地址)：
http://localhost:8080/main/index.html/#/iframe/test/dist/index.html

3. 配备署理处理本地拜访跨域

4. 由于本来的项目，归于直运营商查询接拜访文件，所以子项目的打包需配备相对路径

   由于dist文件是需求放在服务器上作业HTML的，资源默许放在根目录下。打开index.html可运营商设置更新是什么意思以发现，css产品批号是生产日期吗和js文前端学什么件的引证产品策略运用的是绝对路径。但对本地磁盘来说，/指向磁html网页制作盘根目录，所以会找不到引证的文件。需修改项目的https安全问题publicPath为’./’（需求看详细的项目）

5. 由底层传递菜单给子项目（由项目状况决议，也能够独自控制）

6. API恳求

本地恳求发起署理即可（需求留心cookie状况）

7. 由于iframe的缺点，产品批号是生产日期吗运用弹窗及遮罩层问题（底层供应全前端框架屏方案，即子项目调用底层的全屏的弹窗）

8. 底层架构与子产品介绍https协议项目之间的数据沟通

为契合线上线下都能运用（线下存在同源问题），运用postM产品战略essage完毕，然后项目内部运https安全问题用公共bhtml标签特点大html全us，传达底层传递过来的消息（依据项目的技能状况）

有个留心点：在react项目运营商电话号码中能够等候底层将全部的信息预备完毕并传递给子项目之后再烘托主要内容。可是在vue中推迟挂载app.mount(‘#app’)会报错。所以运用公共bus将底层信息，传达给子项目

作业方法

本地开发作业产品战略两个项目，一个是底层的一个是独立的项目

终究

终产品质量法究和某位大佬有个讨观点，就是iframe做微前端欠好。由于看了why not ifram这篇文产品产品经理设计专业章。但个人觉得，用哪个仍是要看实践状况，针对这次项目优化，你的方针是啥。qiankun.js就牛了？是的蛮牛的，可是不能由于前端i产品生命周期frame比较上年前端框架纪，就嫌弃。。。。peace and love前端～html个人网页完整代码

记运营商住给我点赞