vite-plugin-qiankun 使用教程

项目介绍

vite-plugin-qiankun 是一个用于在微前端中集成 qiankun 的 Vite 插件。Qiankun 是一个在同一页面中同时运行多个子应用的微前端解决方案，它可以让我们将一个大型应用拆分成多个小型的子应用，每个子应用可以独立开发、独立部署、独立升级，实现了应用的解耦和团队协作的目的。

vite-plugin-qiankun 实现了自动化分包、公共依赖、沙箱隔离等核心功能。它可以根据配置将子应用的代码自动分割至子应用的独立 chunk 中，同时打包出一个公共依赖的 chunk，并在提前预加载时只加载一次，减少了流量和加载时间。另外，它还为每个子应用生成了一个独立的沙箱，在同一页面中渲染多个子应用时不会相互影响，保证了应用的稳定性和可靠性。

项目快速启动

安装

使用 npm 安装 vite-plugin-qiankun：

npm install @sh-winter/vite-plugin-qiankun --save-dev

配置

在 vite.config.ts 中注册插件：

import { defineConfig } from 'vite';
import qiankun from '@sh-winter/vite-plugin-qiankun';
import { name as packageName } from './package.json';

export default defineConfig({
  base: `/${packageName}/`,
  plugins: [
    qiankun(packageName)
  ]
});

子应用导出

在子应用中导出生命周期函数：

export async function bootstrap() {
  console.log('react app bootstraped');
}

export async function mount(props) {
  console.log('props from main framework', props);
  ReactDOM.render(<App />, document.getElementById('react15Root'));
}

export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#react15Root') : document.getElementById('react15Root'));
}

应用案例和最佳实践

案例一：Vue3 + Vite + Qiankun

在一个项目中管理多个 Vue3 子应用，每个子应用独立开发和部署。

案例二：React + Vite + Qiankun

在一个项目中管理多个 React 子应用，每个子应用独立开发和部署。

最佳实践

1. 独立开发和部署：每个子应用应独立开发和部署，确保团队协作的高效性。
2. 公共依赖管理：合理管理公共依赖，减少重复加载，提升性能。
3. 沙箱隔离：确保每个子应用的沙箱隔离，避免相互影响。

典型生态项目

1. Qiankun

Qiankun 是一个基于 Single-SPA 的微前端框架，支持多种前端框架的集成。

2. Vite

Vite 是一个基于 ES 模块的构建工具，提供了快速的开发体验和高效的构建速度。

3. Vue3

Vue3 是一个流行的前端框架，提供了响应式数据绑定和组件化开发的能力。

4. React

React 是一个用于构建用户界面的 JavaScript 库，提供了高效的虚拟 DOM 和组件化开发的能力。

通过结合这些生态项目，可以构建出高效、稳定、可扩展的微前端应用。