vite-plugin-qiankun 使用教程

最新推荐文章于 2024-08-16 08:05:38 发布

姚蔚桑Dominique

最新推荐文章于 2024-08-16 08:05:38 发布

阅读量609

点赞数 24

本文链接：https://blog.csdn.net/gitblog_00337/article/details/141015205

版权

vite-plugin-qiankun 使用教程

项目地址:https://gitcode.com/gh_mirrors/vi/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'));
}