名词百科

什么是微前端?

一句话定义

微前端是把一个大型前端应用拆成多个可独立开发、独立部署的小应用,再在运行时或构建时组合成一个整体的架构方式。

发布者:黔序科技

它到底是什么

微前端解决的是前端团队的协作边界问题,而不是性能问题。当多个团队要同时改同一个前端仓库、发布互相阻塞时,微前端把边界切开,让各团队自己发布。

它的代价随之而来:应用间共享状态变复杂、样式可能互相污染、依赖重复加载、调试链路变长。因此它适合「组织复杂度已经很高」的场景,而不是「代码有点乱」的场景。

怎么运作的

路由分发:主应用根据路径把不同子应用挂载到指定容器,子应用独立部署,主应用只负责壳与导航。

沙箱隔离:隔离 JavaScript 全局变量与 CSS 作用域,避免子应用互相污染。常见手段是代理 window、shadow DOM 或样式加前缀。

通信:主子应用之间通过事件总线或统一状态层通信,避免直接访问对方内部实现。

依赖共享:公共库(框架、组件库)抽到主应用或通过模块联邦共享,避免每个子应用重复打包。

容易混的几个概念

  • 微服务:后端服务的拆分,微前端是其在前端侧的类比,不是同一套技术。
  • 组件库:代码级复用,不解决部署边界。
  • iframe 嵌套:最原始的隔离方案,隔离彻底但通信与体验差。
  • 模块联邦:构建期共享模块的机制,可与微前端配合使用。

常见问题

小团队需要微前端吗?

通常不需要。团队规模小、发布不冲突时,单体前端加良好的模块划分更简单。引入微前端会带来沙箱、通信、依赖共享等额外复杂度。

微前端会影响性能吗?

会,主要来自重复依赖和多次资源加载。缓解办法是共享公共依赖、预加载子应用资源、按路由懒加载。不做这些优化时,首屏体积明显变大。

B 前端终端 · 同组词条

SPASPA(单页应用)是页面切换不重新加载文档的前端架构,由 JavaScript 接管路由与渲染;SSR(服务端渲染)是在服务端先渲染出 HTML 再返回,首屏更快且利于爬虫抓取。UI设计UI 设计关注界面的视觉呈现(色彩、排版、控件样式);UX 体验设计关注用户完成任务的整体感受与路径效率。前者管「看起来怎样」,后者管「用起来顺不顺」。前后端分离前后端分离是把界面展示与业务逻辑拆成两个独立部分开发的架构方式:前端负责页面与交互,后端提供接口与数据。两者通过 HTTP 接口通信。可视化搭建可视化搭建是用拖拽、配置的方式组装页面或应用的技术,用户无需写代码即可完成布局与内容编排。常见于建站工具、活动页生成和后台装修器。PWAPWA(Progressive Web App,渐进式网页应用)是在普通网页基础上增加离线缓存、桌面安装入口和消息推送能力的网页应用形态。它仍然运行在浏览器中,不需要应用商店。跨平台开发跨平台开发是用一套代码构建多个平台应用的方式,代表框架有 uni-app、Flutter、React Native、Taro。它降低重复开发成本,但平台差异仍需单独适配。公众号开发公众号开发是在微信公众平台的框架内,围绕图文推送、自定义菜单、用户消息和网页授权等能力进行的开发工作。它属于内容与消息载体,不是应用容器。企业官网企业官网建设是围绕企业展示、品牌传达和获客转化搭建官方网站的工作,通常包含信息架构设计、视觉设计、前端实现、内容管理和基础 SEO 配置。