Vite 接入微前端體系，我經(jīng)歷了什么？

哈嘍，我是樹醬。之前搭建的微前端體系已經(jīng)穩(wěn)步運行將近兩年了，最近遇到一些童鞋反饋。之前據(jù)說qiankun并不支持Vite打包的應(yīng)用，那是不是我就無法使用了？

是的，官方暫未有文檔表明已經(jīng)支持Vite。接下來我會從Vite聊起，然后一步步解析如何去解決在qiankun微前端體系中集成基于Vite構(gòu)建的子應(yīng)用.

1 為什么要用Vite？

在Vite沒有誕生之前，我們前端大多都是基于 webpack 構(gòu)建的，主要離不開以下兩點：

• 本地開發(fā)（熱更新HMR）
• 打包上線

webpack的核心簡單概括就是將各類資源打包整合在一起，形成bundle的能力。但是隨著項目的不斷迭代，慢慢演變成一個中大型項目，這時候你會發(fā)現(xiàn)打包時間太久了，換句話說構(gòu)建效率變低了。

而在Bundle工具的演變過程中，我們見證了?webpack^[1]、Rollup^[2]?和?Parcel^[3]?等工具，同時構(gòu)建效率也在逐步提升，如下圖所示??

而伴隨著瀏覽器對ES模塊(ESM)逐步支持兼容，是不是有更快的方式可以解決構(gòu)建問題？

那就是基于瀏覽器支持的?ESM import特性實現(xiàn)的 bundless, 通過利用瀏覽器進行模塊間依賴加載，而不需要在編譯時進行。

換句話說我們不再需要構(gòu)建一個完整的 Bundle（下文我們稱為：Bundless）。當(dāng)我們修改文件時，瀏覽器只需要重新加載單個文件即可。

啊樂同學(xué)：那有哪些 Bundless 解決方案 ？

（見下文）Vite就是其一，回顧下Vite的優(yōu)勢：??

• 在開發(fā)模式下：基于esbuild 預(yù)構(gòu)建依賴（減少HTTP請求） + 瀏覽器自主加載對應(yīng)的模塊，熱更新頁面！

• 在生產(chǎn)模式下：基于Rollup的打包，速度也有一定提升

你一旦體驗到Vite的神速！你真的會停不下來 ??

?? 飯后思考：

• esbuild不是比Rollup更快嗎？生產(chǎn)模式下，為何不用esbuild構(gòu)建？?? 參考答案^[4]

• 如果是對于原生ESM不支持的瀏覽器，開發(fā)模式咋處理？?? 參考答案^[5]

• 不是說好bundless？為何還要用esbuild 預(yù)構(gòu)建依賴呢？?? 參考答案^[6]

• Bundless方案除了Vite之外，還有哪些？?? 參考答案^[7]

• Vite 的目標(biāo)是要干掉 Webpack？?? 參考答案^[8]

2. 微前端框架qiankun與Vite

通過上文，我們了解到使用Vite的優(yōu)勢。那是否qiankun支持基于vite構(gòu)建的子應(yīng)用集成呢？這里我們以vue3+vite的demo為例

會遇到以下兩個需要解決的問題：

• 開發(fā)模式：在開發(fā)環(huán)境下，如果我們使用 vite 來構(gòu)建 vue3 子應(yīng)用，基于vite的構(gòu)建機制，會在子應(yīng)的 html 的入口文件的 script 標(biāo)簽上攜帶 type=module。而我們知道qiankun父應(yīng)用引入子應(yīng)用，本質(zhì)上是將html做為入口文件，并通過import-html-entry這個庫去加載子應(yīng)用所需要的資源列表Js、css，然后通過eval直接執(zhí)行，而基于vite構(gòu)建的js中import、export并沒有被轉(zhuǎn)碼，會導(dǎo)致直接報錯（不允許在非 type=module 的 script 里面使用 import）

• 生產(chǎn)模式：生產(chǎn)模式下，因為沒有諸如webpack中支持運行時publicPath,也就是__webpack_public_path__，換句話說就是vite不支持運行時publicPath，其主要作用是用來解決微應(yīng)用動態(tài)載入的腳本、樣式、圖片等地址不正確的問題。

?? 拓展閱讀：

一開始import-html-entry會過濾掉type=module的文件，導(dǎo)致缺失js卻直接eval最終執(zhí)行出錯，后期這個問題官方已經(jīng)支持??

• Support of?type=module?and?nomodule?attribute in?import-html-entry^[9]

目前qiankun官網(wǎng)文檔并沒有基于Vue3+Vite構(gòu)建的子應(yīng)用打包的文檔指引，但是我們可以在Github的Issue中找到一些解決方案，主要通過以下這兩種方式解決

2.1 只解決生產(chǎn)模式的集成

我們可以通過對子應(yīng)用vite配置的構(gòu)建配置改造來實現(xiàn)

首先修改Vite.config.js·中的build配置, 默認Vite的輸出目標(biāo)target是module，需改為esnext

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

上圖省略部分方法，詳情請看本節(jié)末尾的Demo實例^[11]，代碼實現(xiàn)的目的是為了構(gòu)建html文件作為子應(yīng)用的入口，構(gòu)建結(jié)果如下所示??

其他環(huán)節(jié)跟基于Webpack的配置大致相同，這里不一一贅述

雖然這種方式針對生產(chǎn)模式可以實現(xiàn)集成，但是存在幾個局限性：

• 我們知道為了讓qiankun?拿到子應(yīng)用export的生命周期函數(shù)，所以需要將子應(yīng)用打包成?umd?格式，而vite的code-splitting(代碼分割)功能并不支持iife和umd兩種格式，這會導(dǎo)致路由無法實現(xiàn)懶加載。

• 因為vite不支持運行時publicPath，只能在打包時寫死Base配置

• 圖片最終會被打包成 base64

更詳細的Demo集成例子：?? ?app-vue-vite^[12]

2.2 解決開發(fā)模式 + 生產(chǎn)模式的集成

單獨解決生產(chǎn)模式的集成也不方便，畢竟很多時候需要我們在本地環(huán)節(jié)進行調(diào)試，那有什么方式可以同時讓Vite支持這兩種模式的集成呢？

Github上有一名開源作者開發(fā)了一款Vite插件叫vite-plugin-qiankun，通過這個插件可以在qiankun下走通這兩種模式。甚至保留了vite構(gòu)建模塊的優(yōu)勢

1. 修改Vite.config.js

2. 修改子應(yīng)用的main.ts，將生命周期mount、bootstrap、unmount 等通過插件函數(shù)renderWithQiankun在其中暴露完成。其他配置與基于webpack構(gòu)建的子應(yīng)用相同

? 注意事項：

• qiankun官方是以window.__POWERED_BY_QIANKUN__來判斷當(dāng)前是否為qiankun環(huán)境下，而該插件引用之后是通過qiankunWindow.__POWERED_BY_QIANKUN__來判斷

?? 局限性：

• 生產(chǎn)模式下依舊不支持publicPath, 需要將vite.config.js中base配置寫死。導(dǎo)致多環(huán)境部署不便捷。無法像在webpack結(jié)合window.INJECTED_PUBLIC_PATH_BY_QIANKUN + publicpath來解決

更詳細的Demo集成例子：?? viteapp^[13]

2.3 ?Vite對runtime publicpath的支持

目前在Vite官方文檔沒查閱到相關(guān)的配置，但在Github中找到一個插件vite-plugin-dynamic-publicpath^[14]。如果你有更好的解決方案，也歡迎評論區(qū)留言

2.4 關(guān)于Vite的Dotenv配置

如果你從 vue-cli 切換到Vite 需要注意 Dotenv 命名的變化

• vite前綴是?VITE_?，vue-cli?是?VUE_APP_
• 獲取方式也不一樣，在vite是通過 import.meta.env，而在?vue-cli則是通過?process.env

3.最后

如果你有其他解決方式，歡迎在評論區(qū)留言，也可以加我微信，我們一起喝茶?? 討論

你好，我是?? 樹醬，請你喝杯?? 記得三連哦～

1.閱讀完記得點個贊哦，有?? 有動力

2.關(guān)注公眾號前端那些趣事，陪你聊聊前端的趣事

3.文章收錄在Github frontendThings 感謝Star?

參考資料