在微前端qiankun中使用Vite你踩坑了吗?(上)

简介: 哈喽,我是树酱。之前搭建的微前端体系已经稳步运行将近两年了,最近遇到一些童鞋反馈。之前据说qiankun并不支持Vite打包的应用,那是不是我就无法使用了?

微信截图_20220515001446.png


哈喽,我是树酱。之前搭建的微前端体系已经稳步运行将近两年了,最近遇到一些童鞋反馈。之前据说qiankun并不支持Vite打包的应用,那是不是我就无法使用了?


是的,官方暂未有文档表明已经支持Vite。接下来我会从Vite聊起,然后一步步解析如何去解决在qiankun微前端体系中集成基于Vite构建的子应用.


1 为什么要用Vite?


在Vite没有诞生之前,我们前端大多都是基于 webpack 构建的,主要离不开以下两点:

  • 本地开发(热更新HMR)
  • 打包上线


webpack的核心简单概括就是将各类资源打包整合在一起,形成bundle的能力。但是随着项目的不断迭代,慢慢演变成一个中大型项目,这时候你会发现打包时间太久了,换句话说构建效率变低了。


微信截图_20220515001458.png


而在Bundle工具的演变过程中,我们见证了 webpackRollupParcel 等工具,同时构建效率也在逐步提升,如下图所示👇


微信截图_20220515001556.png


而伴随着浏览器对ES模块(ESM)逐步支持兼容,是不是有更快的方式可以解决构建问题?


那就是基于浏览器支持的 ESM import特性实现的 bundless, 通过利用浏览器进行模块间依赖加载,而不需要在编译时进行。


换句话说我们不再需要构建一个完整的 Bundle(下文我们称为:Bundless)。当我们修改文件时,浏览器只需要重新加载单个文件即可。


微信截图_20220515001614.png


啊乐同学:那有哪些 Bundless 解决方案 ?


(见下文)Vite就是其一,回顾下Vite的优势:👇


  • 在开发模式下:基于esbuild 预构建依赖(减少HTTP请求) + 浏览器自主加载对应的模块,热更新页面!
  • 在生产模式下:基于Rollup的打包,速度也有一定提升


微信截图_20220515001626.png


你一旦体验到Vite的神速!你真的会停不下来 🚀


🍚 饭后思考:


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的输出目标targetmodule,需改为esnext


微信截图_20220515001657.png


然后在配置文件中引入 @rollup/plugin-html


相关文章
|
1月前
|
前端开发 JavaScript 开发工具
Vite 4.0 发布,下一代的前端工具链
【10月更文挑战第21天】Vite 4.0 的发布标志着前端开发领域的又一次重要进步。它为开发者带来了更高效、更智能、更具创新性的开发体验,正逐渐成为下一代前端工具链的引领者。
|
2月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
483 8
|
2月前
|
前端开发 JavaScript
Vite 多种前端框架的构建
Vite 多种前端框架的构建
|
2月前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
246 1
|
2月前
|
资源调度 前端开发 JavaScript
Vite:新一代前端构建工具的革命性体验
【10月更文挑战第13天】Vite:新一代前端构建工具的革命性体验
|
2月前
|
前端开发 JavaScript 中间件
Vite:下一代前端构建工具的崛起
【10月更文挑战第13天】Vite:下一代前端构建工具的崛起
|
2月前
|
JSON 前端开发 JavaScript
Vite:新一代前端构建工具的崛起
【10月更文挑战第13天】Vite:新一代前端构建工具的崛起
|
2月前
|
前端开发 JavaScript
轻松上手:基于single-spa构建qiankun微前端项目完整教程
轻松上手:基于single-spa构建qiankun微前端项目完整教程
63 0
|
4月前
|
缓存 前端开发 JavaScript
前端项目性能优化:使用vite的分包策略
【8月更文挑战第4天】Vite性能优化-分包策略
134 2
前端项目性能优化:使用vite的分包策略
|
4月前
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
543 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目