微前端-前端项目拆解简述

1、起因

1、系统庞大,涉及多个角色,角色互串,导致功能与功能之间的关系不清晰

2、角色对应的页面划分不清晰,系统和系统之间混杂在一起

3、前端项目过大,前端性能低下

4、组员多,项目管理难

2、拆解后的预期

1、优势

1、角色清晰、角色所属功能清晰

2、项目解耦,便于维护管理

3、项目上线,完全不会影响现有功能

4、性能进一步提升

5、拆解颗粒度足够细时,将不在限制于技术框架,对优秀人才的需求可以多元化

2、劣势

1、现有共用功能,难以实现共用,导致了代码冗余(持续迭代则是需要这么做)

2、第三方包多次引入,项目的总包增大(功能拆解后,对应的角色有对应的功能,绝大多数用户并不需要或者没有权限加载所有内容,整体包加载应当是降低的)

3、对项目管理要求提升,清晰各个系统之间的串联

4、全局性功能修改难度提升(bit)

5、严重依赖组件库(劣势4),依赖固有的规范,发布流程等(后期沉淀为自己的一套模式十分重要)

6、非常依赖于前期的规划或者经验丰富者

3、拆解维度

1、拆解将以系统层面拆解

2、以用户的角色拆解为子系统

3、子系统再拆解,拆解为独立模块项目

4、项目跳转则是路由+项目地址的方式跳转(又以系统为大目录,对应的下级模块为目录,并不会混乱)

4、项目拆解解析

目前业内并没有完美的解决方案,现在更多的解决方案是:iframe模式、多页面模式或者其他,各有优缺点,没有银弹。具体的实现,则不一一描述。

原文地址:https://www.cnblogs.com/baimulan/p/11700795.html

时间: 2024-11-09 01:34:46

微前端-前端项目拆解简述的相关文章

前端开源项目周报0109

由OpenDigg 出品的前端开源项目周报第五期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目,方便前端开发人员便捷的找到自己需要的项目工具等. bttn.css 独一无二的按钮 zoom.js 纯JavaScript图片缩放插件 vue-amap 基于Vue 2和高德地图的地图组件 eleme 高仿饿了么app商家详情 Clean-Google-Calendar 使Google日历看起来更美观 react-native-fan-button 菜单在点击

前端开源项目周报0116

由OpenDigg 出品的前端开源项目周报第六期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目,方便前端开发人员便捷的找到自己需要的项目工具等. ityped 非常简单的键入样式 video-react web视频播放器 rexxar-web 针对移动端的混合开发框架 redux-subscriber 在Redux状态的任何部分订阅change simple-element-resize-detector 使用隐藏的iframe观察元素的大小调整 vue

OpenDigg前端开源项目周报1219

由OpenDigg 出品的前端开源项目周报第二期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目,方便前端开发人员便捷的找到自己需要的项目工具等. react-fix-it 根据error自动生成测试 siema 轻量级轮播框插件 css-loader CSS加载器 rexxar-android 针对移动端的混合开发框架 react-decoration React组件装饰集合 pxq 基于 react + redux + immutable + ES6

前端开源项目周报0502

由OpenDigg 出品的前端开源项目周报第十九期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等. react-sketchapp 为Sketch渲染React组件 DevExtreme 最佳响应式跨平台组件套件 bilibili-vue 全栈式开发bilibili首页 pandemonium 典型的随机相关的功能 vue-toutiao vuejs高仿今日头条移动端 MagicMusic 不一样的音乐 Vue2-M

OpenDigg前端开源项目月报201704

由OpenDigg 出品的前端开源项目月报第一期来啦.我们的前端开源月报集合了OpenDigg一个月来新收录的优质前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具. reactide React web应用开发的第一个专用IDE redux-offline 持久性Redux存储 react-loadable 用于加载组件的高阶组件 react-overdrive 超级简单的神奇移动过渡 moveTo 轻量级滚动动画js库 eagle.js hacker的幻灯片演示框架 react-sp

前端开源项目周报0214

由OpenDigg 出品的前端开源项目周报第八期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等.qart.js 合并图片和二维码 hyperapp 创建现代UI应用 tilt.js 小巧的requestAnimationFrame preload-webpack-plugin 自动布线的Webpack插件 luxbar 轻量级响应式的CSS导航栏 zanui-weapp 好用易扩展的小程序 UI 库 injectio

直接拿来用!最火的前端开源项目(一)

对于开发者而言,了解当下比较流行的开源项目很是必要.利用这些项目,有时能够让你达到事半功倍的效果.为此,本文整理GitHub上最火的前端开源项目列表,内容涵盖了Hack Design. Designer School.TheExpressiveWeb.如何成为优秀的前端开发工程师.Web开发教学材等,这里按分类的方式列出前九个. 详细内容如下: 一.Architecture 网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划.设计网站栏目及其内容,制定网站开

前端开源项目周报0425

由OpenDigg 出品的前端开源项目周报第十八期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等. react-move React中精致而准确的动画化 MeiTuan RN版仿美团客户端 curvejs 腾讯AlloyTeam正式发布Web魔幻线条 forall JavaScript表达式静态类型和不变检查 douban 基于vue全家桶的精致豆瓣DEMO tas 轻量级JavaScript逻辑框架 Wuji 吾记

前端开源项目周报0228

由OpenDigg 出品的前端开源项目周报第十期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等.unfetch 极限最小的fetch polyfill vue-picture-input 移动友好的图片文件输入组件 between JavaScript动画库 vue-express-mongodb 简单的前后端分离案例 vue-carousel-3d VueJS的3D轮播组件 react-magic 神奇的动画合集