Skip to main content
从 0 到 1 构建企业级 Vue3 组件库：架构设计与工程化实践

阅读时间：约 25 分钟 | 难度：高级 | 适用场景：组件库设计/前端架构/团队技术分享

目录

SewenAbout 30 min项目搭建组件库组件库
使用微前端重构后台管理项目

背景

当前部门维护了三个后台管理系统项目，其中两个项目使用 vue2 开发，一个使用 vue3开发。

当前三个项目使用的核心库/插件如下：

技术/项目 赛场工具 MakeX赛事管理后台 XCS-CMS
前端 MVVM 框架 "vue": "^2.6.11" "vue": "^2.6.11" "vue": "3.2.41"
UI 组件库 "ant-design-vue": "^1.7.5" "ant-design-vue": "^1.7.2" "ant-design-vue": "3.2.20"
HTTP 库 "axios": "^0.21.1" "axios": "^0.21.1"
OSS "ali-oss": "^6.16.0" "ali-oss": "^6.14.0" "ali-oss": "^6.17.1"
passport-client "@makeblock/passport-client": "^3.4.6" "@makeblock/passport-client": "^3.4.7" "@makeblock/passport-client": "^3.4.10"
低代码表单 "k-form-design": "^3.7.2"
SewenAbout 20 min微前端微前端 微前端框架 组件库
微前端技术方案
技术方案 特点 通信方式 优点 缺点
基于Web Components 使用 Web Components的四个主要技术：
Custom Elements、Shadow DOM、HTML Templates、HTML Imports。
将前端应用程序拆分为多个Web Components。		 CustomEvent 标准化技术，具有广泛的浏览器支持
高内聚、低耦合，易于维护和扩展良好的封装性和隔离性
Shadow DOM 天生的作用域隔离		 需要一定的学习成本来掌握Web Components的使用
浏览器兼容性问题
可能需要额外处理不支持全局样式和JavaScript的共享
修改样式困难
基于自定义元素和Shadow DOM 使用自定义元素封装微前端应用，
并使用Shadow DOM提供隔离性。		 高内聚、低耦合，易于维护和扩展良好的封装性和隔离性
支持自定义元素和Shadow DOM的浏览器兼容性较好		 需要一定的学习成本来掌握自定义元素和Shadow DOM的使用
不支持全局样式和JavaScript的共享可能受到浏览器
基于iframe 使用iframe将每个微前端应用嵌入到主框架中，实现隔离。 postMessage 简单、快速
实现良好的隔离性，避免样式和全局变量的冲突
支持跨域通信		 性能开销较大，因为每个iframe都是独立的浏览器上下文
难以共享资源，如全局状态、数据等页面刷新和导航问题
用户体验差：弹窗只能在 iframe中，在内部切换刷新会丢失状态
基于微服务网关路由分发 使用微服务网关作为微前端应用的代理和调度器，
根据请求转发到不同的微前端应用。		 支持跨域请求和API网关功能
可以实现统一的身份认证和权限管理
灵活性强，支持多种微前端技术		 实现复杂，需要配置和维护微服务网关
对网络通信有较高要求可能增加额外的性能开销
基于单页面应用（SPA） 通过在主框架中配置路由，
根据路由加载不同的微前端应用。		 简单易用，适用于SPA架构
支持全局状态和数据共享
易于集成第三方库和框架		 隔离性较差，样式和全局变量可能冲突
对SPA架构有依赖，不适合传统多页面应用
需要处理路由冲突和嵌套问题兼容性的限制
Module fedearation webpack5 的模块联邦机制 通过模块联动将组件打包导出
共享模块的方式通信<		 无 CSS 沙箱和 JS 沙箱
需要 webpack5
SewenAbout 20 min微前端微前端
微前端框架

为什么需要微前端框架？

当我们需要进行对旧应用进行增量升级、项目拆分时候，确定了需要使用微前端技术以后，我们可以使用一些主流的微前端技术方案自己去实现微前端：

  • 基于 Web Components
  • 基于自定义元素和 Shadow DOM
  • 基于 iframe
  • 基于微服务网关路由分发
  • 基于单页面应用（SPA）
  • 基于 WebPack5 Module fedearation

详细可以参考：微前端技术方案 | Sewen 博客 (sewar-x.github.io)

SewenAbout 46 min微前端微前端 微前端框架
使用微前端重构项目

项目搭建 Demo: Sewar-x/micro-app-demo: 使用京东 micro-app 微前端技术，重构的后台管理系统项目框架 demo (github.com)

背景

最近有一个多年老项目（该项目使用 PHP + JQuery 前后端不分离模式开发，由于该项目经历多手人员维护，还参杂使用 CDN 方式引入 element-ui 和 Ant-design，纯后端人员维护，总之技术栈很乱）接到一些新需求，该项目由一位多年经验后端人员维护。这些需求后端维护人员表示无法使用 JQuery 实现（简述就是实现类是任务进度看板和自定义描述列表需求）。

SewenAbout 9 min微前端微前端 微前端框架
微前端基础

什么是微前端？

微前端是一种技术手段及方法策略，旨在通过多个团队独立发布功能的方式，共同构建现代化的Web应用。

它借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用（即微应用），每个微应用都可以独立开发、独立运行、独立部署，然后再将这些小型应用联合为一个完整的应用。

目标

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，确保微应用真正具备独立开发、独立运行的能力。

这种架构既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性。相比一整块的前端仓库，微前端架构下的前端仓库更小、更灵活。

SewenAbout 43 min微前端微前端
React Fiber

提出背景

浏览器渲染限制

浏览器的帧

页面是一帧一帧绘制出来的，当每秒绘制的帧数（FPS）达到 60 时，页面是流畅的，小于这个值时，用户会感觉到卡顿。

上图是一帧内需要完成的任务，浏览器在一帧内可完成如下任务：

  • 输入事件捕捉：

    • 浏览器首先会接受用户的输入事件，如点击、滚动、触摸等，并准备将其转换为相应的处理逻辑。
      • Blocking input events（阻塞输入事件）：例如 touch 或 wheel
      • Non-blocking input events（非阻塞输入事件）：例如 click 或 keypress

  • 事件回调执行：

    • 对于已注册的事件监听器，浏览器会执行相应的事件回调函数，处理用户输入或页面状态的变化。

  • 帧开始（Begin frame）：

    • 每一帧事件（Per frame events），例如 window resize、scroll 或 media query change

  • 样式计算和布局：

    • rAF（requestAnimationFrame）
    • 浏览器会解析和计算CSS样式，确定页面中每个元素的尺寸和位置。这个过程称为布局或重排。

  • 绘制渲染（Paint）：合成更新（Compositing update）、重绘部分节点（Paint invalidation）和 Record

    • 绘制（渲染）：

      • 在确定了元素的样式和位置后，浏览器会开始绘制页面。
      • 这包括将文本、图像和其他内容绘制到屏幕上。绘制操作可能涉及多个层级的渲染，最终合成到屏幕上显示。

    • 合成：

      • 如果页面使用了硬件加速（如CSS3D转换或WebGL），浏览器会将不同层级的渲染结果合成到一起，形成一个完整的页面图像。

  • 空闲回调执行：如果在一帧的剩余时间内还有空闲时间，并且存在待执行的空闲回调（如RequestIdleCallback），浏览器会尝试执行这些回调。这些回调通常用于执行非关键性的、可延迟的任务。

浏览器的渲染过程受到设备刷新率的限制。一般来说，设备的刷新率是60Hz，意味着每秒钟有60帧的渲染机会。因此，浏览器需要在大约16.67毫秒（1000毫秒/60帧）内完成上述所有任务，以确保流畅的动画和用户交互。

SewenAbout 28 minReactReact Fiber
前端渲染架构

单页面应用与多页面应用

单页面应用

  • 概念：

    • 单页面应用（Single Page Application，SPA）是一种基于Web的应用程序架构，通过动态地更新当前页面而不刷新整个页面，提供更流畅的用户体验。

  • 特点：

    • 单页面加载：SPA在初次加载时只加载一个HTML页面，后续的页面切换和内容更新通过JavaScript操作DOM来实现，无需进行整个页面的刷新。
    • 前端路由：SPA使用前端路由来管理不同视图之间的切换，通过URL的变化来匹配不同的组件或页面。
    • 动态更新：SPA可以通过AJAX或其他技术从服务器获取数据，并使用JavaScript动态地更新页面内容，实现数据驱动的交互和动态效果。
    • 更好的用户体验：由于只更新部分页面内容，SPA在用户与应用程序交互时提供更快速、流畅的响应，类似于桌面应用程序的体验。
    • 跨平台兼容性：SPA可以在多个平台上运行，如Web浏览器、移动设备浏览器和桌面应用程序。

  • 优点：

    • 更快的响应速度：由于只需要加载和渲染部分内容，SPA相对于传统的多页面应用在页面切换和内容更新时具有更快的响应速度。
    • 更好的用户体验：SPA提供类似桌面应用程序的体验，无需频繁刷新整个页面，用户可以无缝地进行交互和导航。
    • 代码复用：SPA通常使用前端框架（如React、Vue等），可以实现组件化开发和代码复用，提高开发效率和维护性。

  • 缺点：

    • 初次加载较慢：由于SPA需要加载并执行大量JavaScript代码，初次加载时可能需要较长时间，尤其是在网络条件较差的情况下。
    • SEO差：由于SPA在初次加载时只返回一个HTML骨架，页面内容是通过JavaScript动态生成的，对搜索引擎的抓取和索引性能较差。需要额外的技术手段来解决SEO问题。
    • 浏览器兼容性：SPA依赖于JavaScript来实现页面更新和交互，因此对于不支持JavaScript的浏览器或搜索引擎爬虫，SPA可能无法正常运行或被索引。

    单页面应用适用于对用户体验和交互性要求较高的应用，如Web应用程序、博客、社交媒体等。它提供了更快速、流畅的用户体验，但需要注意SEO和初次加载时间的优化。

    在使用 React、Vue、Angular 等框架开发的应用大多数为单页面应用。

SewenAbout 41 min前端工程化前端工程化前端渲染架构
从零到一搭建移动端SSG项目

详细项目代码参考： Sewar-x/SSG-Demo: 《从零到一搭建移动端SSG项目实践》| Sewen 博客 示例项目，项目仅作学习使用 (github.com)

预渲染 (SSG )

概念

  • SSG是指在构建时（build time）生成静态HTML文件，这些文件可以直接提供给浏览器，而不需要在服务器上进行动态渲染。
  • 在构建过程中，组件会被渲染成静态HTML，并保存在文件中。这意味着每个页面都是预渲染的，并且可以以纯静态文件的形式提供给浏览器，无需运行 JavaScript 代码，会有一些辅助的JS来增强页面交互；
SewenAbout 48 min移动端开发SSG项目