哈喽，我是树酱。之前搭建的微前端体系已经稳步运行将近两年了，最近遇到一些童鞋反馈。之前据说qiankun并不支持Vite打包的应用，那是不是我就无法使用了？
是的，官方暂未有文档表明已经支持Vite。接下来我会从Vite聊起，然后一步步解析如何去解决在qiankun微前端体系中集成基于Vite构建的子应用.
1 为什么要用Vite？
在Vite没有诞生之前，我们前端大多都是基于 webpack 构建的，主要离不开以下两点：
- 本地开发（热更新HMR）
- 打包上线
webpack的核心简单概括就是将各类资源打包整合在一起，形成bundle的能力。但是随着项目的不断迭代，慢慢演变成一个中大型项目，这时候你会发现打包时间太久了，换句话说构建效率变低了。
而在Bundle工具的演变过程中，我们见证了 webpack、Rollup 和 Parcel 等工具，同时构建效率也在逐步提升，如下图所示👇
而伴随着浏览器对ES模块(ESM)逐步支持兼容，是不是有更快的方式可以解决构建问题？
那就是基于浏览器支持的 ESM import特性实现的 bundless, 通过利用浏览器进行模块间依赖加载，而不需要在编译时进行。
换句话说我们不再需要构建一个完整的 Bundle（下文我们称为：Bundless）。当我们修改文件时，浏览器只需要重新加载单个文件即可。
啊乐同学：那有哪些 Bundless 解决方案 ？
（见下文）Vite就是其一，回顾下Vite的优势：👇
-
在开发模式下：基于
esbuild预构建依赖（减少HTTP请求） + 浏览器自主加载对应的模块，热更新页面！ -
在生产模式下：基于
Rollup的打包，速度也有一定提升
你一旦体验到Vite的神速！你真的会停不下来 🚀
🍚 饭后思考：
-
esbuild不是比Rollup更快吗？生产模式下，为何不用esbuild构建？👉 参考答案
-
如果是对于原生ESM不支持的浏览器，开发模式咋处理？ 👉 参考答案
-
不是说好bundless？为何还要用
esbuild预构建依赖呢？ 👉 参考答案 -
Bundless方案除了Vite之外，还有哪些？ 👉 参考答案
-
Vite 的目标是要干掉 Webpack？ 👉 参考答案
2. 微前端框架qiankun与Vite
通过上文，我们了解到使用Vite的优势。那是否
qiankun支持基于vite构建的子应用集成呢？这里我们以vue3+vite的demo为例
会遇到以下两个需要解决的问题：
-
开发模式：在开发环境下，如果我们使用 vite 来构建 vue3 子应用，基于vite的构建机制，会在子应的
html的入口文件的script标签上携带type=module。而我们知道qiankun父应用引入子应用，本质上是将html做为入口文件，并通过import-html-entry这个库去加载子应用所需要的资源列表Js、css，然后通过eval直接执行，而基于vite构建的js中import、export并没有被转码，会导致直接报错（不允许在非 type=module 的 script 里面使用 import） -
生产模式：生产模式下，因为没有诸如webpack中支持运行时
publicPath,也就是__webpack_public_path__，换句话说就是vite不支持运行时publicPath，其主要作用是用来解决微应用动态载入的脚本、样式、图片等地址不正确的问题。
🌲 拓展阅读：
一开始import-html-entry会过滤掉type=module的文件，导致缺失js却直接eval最终执行出错，后期这个问题官方已经支持👇
目前qiankun官网文档并没有基于Vue3+Vite构建的子应用打包的文档指引，但是我们可以在Github的Issue中找到一些解决方案，主要通过以下这两种方式解决
2.1 只解决生产模式的集成
我们可以通过对子应用vite配置的构建配置改造来实现
首先修改Vite.config.js·中的build配置, 默认Vite的输出目标target是module，需改为esnext
然后在配置文件中引入 @rollup/plugin-html
上图省略部分方法，详情请看本节末尾的Demo实例，代码实现的目的是为了构建html文件作为子应用的入口，构建结果如下所示👇
其他环节跟基于Webpack的配置大致相同，这里不一一赘述
虽然这种方式针对生产模式可以实现集成，但是存在两个局限性：
- 我们知道为了让
qiankun拿到子应用export的生命周期函数，所以需要将子应用打包成umd格式，而vite的code-splitting(代码分割)功能并不支持iife和umd两种格式，这会导致路由无法实现懒加载。
- 图片最终会被打包成
base64
更详细的Demo集成例子：👉 app-vue-vite
2.2 解决开发模式 + 生产模式的集成
单独解决生产模式的集成也不方便，毕竟很多时候需要我们在本地环节进行调试，那有什么方式可以同时让Vite支持这两种模式的集成呢？
Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun，通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势
- 修改
Vite.config.js
2. 修改子应用的
main.ts，将生命周期mount、bootstrap、unmount 等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同
⏰ 注意事项：
- qiankun官方是以
window.__POWERED_BY_QIANKUN__来判断当前是否为qiankun环境下，而该插件引用之后是通过qiankunWindow.__POWERED_BY_QIANKUN__来判断
🐸 局限性：
- 生产模式下依旧不支持
publicPath, 需要将vite.config.js中base配置写死。导致多环境部署不便捷。无法像在webpack结合window.INJECTED_PUBLIC_PATH_BY_QIANKUN+publicpath来解决
更详细的Demo集成例子：👉 viteapp
2.3 Vite对runtime publicpath的支持
目前在Vite官方文档没查阅到相关的配置，但在Github中找到一个插件vite-plugin-dynamic-publicpath。如果你有更好的解决方案，也欢迎评论区留言
2.4 关于Vite的Dotenv配置
如果你从 vue-cli 切换到Vite 需要注意 Dotenv 命名的变化
vite前缀是VITE_，vue-cli是VUE_APP_- 获取方式也不一样，在
vite是通过import.meta.env，而在vue-cli则是通过process.env
3.最后
如果你有其他解决方式，欢迎在评论区留言，也可以加我微信，我们一起喝茶🍵 讨论
往期热门文章📖：
- 这些node开源工具你值得拥有(下)
- 从0到1开发可视化数据大屏（上）
- 从0到1开发可视化数据大屏（下）
- 树酱的前端知识体系构建（上）
- 树酱的前端知识体系构建（下）
- 聊聊前端开发日常的协作工具
- babel配置傻傻看不懂
- 如何更好管理 Api 接口
- 面试官问你关于node的那些事
- 前端工程化那些事
- 你学BFF和Serverless了吗
- 前端运维部署那些事
你好，我是🌲 树酱，请你喝杯🍵 记得三连哦～
1.阅读完记得点个赞哦，有👍 有动力
2.关注公众号前端那些趣事，陪你聊聊前端的趣事
3.文章收录在Github frontendThings 感谢Star✨
