-
• single-spa简介
-
• 架构概览
-
• Single-spa 包括以下内容:
-
• Applications
-
• 一个 single-spa-config配置
-
• 使用 single-spa 很难么？
-
• 其他选择
single-spa简介
single-spa是一个很好的微前端基础框架，qiankun框架就是基于single-spa来实现的，在single-spa的基础上做了一层封装，也解决了single-spa的一些缺陷。
Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。使用 single-spa 进行前端架构设计可以带来很多好处，例如:
-
• 在同一页面上使用多个前端框架 而不用刷新页面 (React, AngularJS, Angular, Ember, 你正在使用的框架)
-
• 独立部署每一个单页面应用
-
• 新功能使用新框架，旧的单页应用不用重写可以共存
-
• 改善初始加载时间，延迟加载代码
架构概览
Single-spa 从现代框架组件生命周期中获得灵感，将生命周期应用于整个应用程序。
它脱胎于 Canopy 使用 React + React-router 替换 AngularJS + ui-router 的思考，避免应用程序被束缚。
现在 single-spa 几乎支持任何框架
Single-spa 包括以下内容:
Applications
每个应用程序本身就是一个完整的 SPA (某种程度上)。每个应用程序都可以响应 url 路由事件，并且必须知道如何从 DOM 中初始化、挂载和卸载自己。
传统 SPA 应用程序和 Single SPA 应用程序的主要区别在于，它们必须能够与其他应用程序共存，而且它们没有各自的 html 页面。
例如，React 或 Angular spa 就是应用程序。当激活时，它们监听 url 路由事件并将内容放在 DOM上。当它们处于非活动状态时，它们不侦听 url 路由事件，并且完全从 DOM 中删除。
一个 single-spa-config配置
这是html页面和向Single SPA注册应用程序的JavaScript。每个应用程序都注册了三件东西
-
• A name
-
• A function (加载应用程序的代码)
-
• A function (确定应用程序何时处于活动状态/非活动状态)
使用 single-spa 很难么？
我们的目标是尽可能简化single-spa的使用过程。但是我们还应该指出，这是一种高级架构，它不同于前端应用程序通常的实现方式。
Single-spa 适用于 ES5、 ES6 + 、 TypeScript、 Webpack、 SystemJS、 Gulp、 Grunt、 Bower、 ember-cli 或 任何可用的构建系统。
您可以 npm 安装它，jspm 安装它，如果您愿意，甚至可以使用 <script> 标签。
single-spa 可以在 Chrome、 Firefox、 Safari、 IE11和 Edge 中使用。
其他选择
-
• qiankun [https://qiankun.umijs.org/zh/] 是一个很不错的替代品。
-
• Isomorphic Layout Composer [https://github.com/namecheap/ilc] – 一个将微前端组成部分支持SSR完整的解决方案。
-
• 无界 [https://wujie-micro.github.io/doc/] 是一个很不错的替代品。
参考文档
-
• https://zh-hans.single-spa.js.org/
原文始发于微信公众号（前端爱好者）：微前端之single-spa简介
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267121.html
