微前端之了解篇

微前端

• • what？
  • • • 基础概念
      • 应用隔离
  • why？
  • how？
  • • 实现方案
    • • Qiankun 使用
    • 参考

雅师傅：这还不简单，qiankun 你值得拥有，动态加载，你就用路由控制。

(画外音)这不，神奇的知识又增加了。

what？

基础概念

经过我的前言，相信你对微前端有了大概的认知。那么我来总结一下。
微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

1. 它将微服务的理念应用于浏览器端，各个前端应用还可以独立运行、独立开发、独立部署。
2. 微前端不是单纯的前端框架或者工具，而是一套架构体系。
3. 更详细可参考微前端相关文档

那么各个前端应用在主应用中展示，我子应用要是把数据挂在全局变量下，可咋整？
这可就说到了微前端的应用隔离。

应用隔离

1. CSS 样式隔离
   2. 微应用与主应用之间的样式污染
      3. CSS Module 或者命名空间的方式，以微应用特定前缀
      4. webpack的postcss插件，在打包时添加特定的前缀
   3. 微应用间的 CSS 隔离
      4. 应用加载时，对link与style标记，应用卸载后，同步卸载对应的 link 和 style
2. JavaScript 执行环境隔离
   3. 核心在于对 window 的修改和全局事件的改变，最常用的做法是采用沙箱机制。

让局部的JavaScript运行时，对外部对象的访问和修改处在可控的范围内，即无论内部怎么运行，都不会影响外部的对象

1. Node.js端可以采用vm模块
2. 浏览器，则需要结合with关键字和window.Proxy对象来实现浏览器端的沙箱

why？

任何新技术的产生都是为了解决现有场景和需求下的技术痛点。

1. SPA（单页面应用）实现路由劫持和应用加载，随着应用功能的丰富，单应用变得越来越庞大且难以维护，牵一处而动全身。随之为了解耦，微前端随之而生。
2. 整合历史系统，在不修改原有逻辑与代码时，同时兼容新老系统并行运行。

how？

实现方案

1. 微前端实现为拆解与整合。通常为父应用加子应用。不可避免使用到 Nginx 做转发，使用iframe 整合……对比如图：
   
2. 常用的框架有：
   3. Mooa：基于Angular的微前端服务框架
   4. Single-Spa：最早的微前端框架，兼容多种前端技术栈。
   5. Qiankun：基于Single-Spa，阿里系开源微前端框架。
   6. Icestark：阿里飞冰微前端框架，兼容多种前端技术栈。
   7. Ara Framework：由服务端渲染延伸出的微前端框架。

Qiankun 使用

以微应用为 Vue 应用为例。使用vue-admin-template，查看qiankun->项目实践

1. 主应用按照文档很简单
2. 微应用操作时
   3. 在 src 目录新增 public-path.js，会报__webpack_public_path 未定义，请无视
   4. 入口main.js修改注意
      5. render函数中，router 可能另在 new Router，直接引入Vue ,再将router.js修改一下 base与 mode即可
      6. 原有外层的new Vue() 请注释
3. 运行时容易发现跨域，请搭配 Nginx 食用

参考

微前端-最容易看懂的微前端知识

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！