微前端框架 `micro-app` 教程

微前端框架 micro-app 教程

micro-appA simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架项目地址:https://gitcode.com/gh_mirrors/mi/micro-app

1. 项目介绍

micro-app 是由京东零售推出的一款微前端框架。它基于类WebComponent的思想，以组件化的思维实现微前端，降低了入门难度，提升了工作效率。作为一个低门槛的微前端接入方案，它不局限于特定的前端框架，任何框架都可以作为基座应用，嵌入各种类型的微应用。

主要特性包括：

• JS沙箱：提供独立的JavaScript执行环境。
• 样式隔离：避免CSS污染主应用和其他微应用。
• 元素隔离：确保DOM不会相互影响。
• 数据通信：支持微应用间的数据传递。
• 插件系统：允许自定义扩展功能。
• 预加载：优化资源加载速度。

2. 项目快速启动

安装

首先，你需要在你的基座应用中安装 micro-app：

yarn add @micro-zoe/micro-app
# 或者
npm install @micro-zoe/micro-app

基座应用配置

在你的主入口文件（例如 index.js）中引入并初始化 micro-app：

import { register } from '@micro-zoe/micro-app'

register({
  name: 'your-micro-app-name', // 微应用名称
  entry: 'http://path/to/your/micro/app', // 微应用入口URL
  container: '#app', // 指定微应用挂载的DOM容器
})

启动微应用

在HTML文件中预留微应用的挂载点：

<div id="app"></div>

至此，一个简单的微应用已经被注册并且可以在页面上运行了。

3. 应用案例和最佳实践

• 最佳实践: 将复杂单页应用(SPA)拆分成多个微应用，按需加载，提升首屏加载速度。
• 案例: 在大型电商网站中，可以将搜索、商品详情、购物车等不同功能模块做成独立的微应用，每个都有自己的生命周期管理和资源管理。

4. 典型生态项目

• Micro-App-DevTools：这是一个微前端开发工具，提供调试和性能分析等功能，有助于开发过程中的问题定位和优化。
• 相关插件：如路由插件、状态管理插件等，它们可以帮助扩展微应用的功能和集成现有开发模式。

---

了解更多详细信息，可访问MicroApp官方文档，参与Bug反馈或加入聊天室交流讨论。

micro-appA simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架项目地址:https://gitcode.com/gh_mirrors/mi/micro-app