作者：京東科技 孫凱
一、前言
對前端開發者來說，Vite 應該不算陌生了，它是一款基于 nobundle 和 bundleless 思想誕生的前端開發與構建工具，官網對它的概括和期待只有一句話：“下一代的前端工具鏈”，
Vite 最早的版本由尤雨溪發布于3年前，經歷了3年多的發展，Vite 也已逐漸迭代成熟，它的穩定性、擴展性、周邊生態足以在生產環境中支撐各種業務場景的落地，但是關于Vite的優劣勢分析我們就戛然而止，不在深入展開了，這不是本文的重點，
本文的重點在于探究 Vite 如何實作兼容低版本瀏覽器，這一切還得從那個陽光明媚的午后說起??，
二、那個午后
本著嘗鮮的態度，我在某一個專案中用了 Vite，當時還是3.x.x的版本，跟著檔案配置，從專案啟動到專案構建，一路都很“德芙”（縱享絲滑），在經歷了 Vite 帶來的短暫新鮮感后，就一直沉浸在業務模塊的開發中了，因為在 Vite 剛發布后的那段時間曾看過相關原理決議，是基于瀏覽器原生的模塊化能力按需構建BALABALA等，所以后來 Vite 的這種新鮮感對我而言并沒有保持多久，
但直到有天下午我開始打包提測，審查頁面元素后發現構建產物居然跟以往 webpack 的產物竟然有點不一樣，在好奇心的驅使下，于是我開始嘗試解謎，
三、跟webpack構建產物到底哪里不一樣？
1. 準備作業
為了能更好的對比兩者產物究竟有什么區別，我們首先要確保我們的業務代碼基本一致，不一致的地方僅僅是使用不同工具（ vite 和 webpack）進行構建，這樣才能排除最大干擾因素，
于是我們分別使用最新版的 Vite 和 webpack 初始化了兩個頁面，為了做作區分，兩個頁面的僅標題和標題背景不一致，他們在瀏覽器中渲染后的分別長這個樣子：
2. 構建工具版本說明
? Vite：v4.1.4
? webpack：v5.75.0
3. 構建工具配置項說明
? Vite （非常簡單，啥也沒有）
// vite.config.js
import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
legacy({
targets: ['ios >= 9', 'android >= 4.2', '> 1%']
})
],
server: {
host: '127.0.0.1'
},
build: {
minify: false
}
})
? webpack（太多了，也比較常規，就不在這里貼出來全部配置項了，僅在這里配置好跟 Vite 一樣的需要兼容到最低的瀏覽器版本）
// .browserslistrc
ios >= 9
android >= 4.2
> 1%
至此，準備作業完畢，讓我們看看兩者的構建產物吧，
4. 構建產物
從產物的命名中，我們就能多少看出些許區別，webpack的產物比較簡單，中規中矩，而 Vite 的 JS 檔案不但比 webpack 多，而且部分檔案命名中還多了一個單詞：legacy，百度翻譯對它的解釋是：遺產;遺贈財物;遺留;后遺癥；（計算機系統或產品）已停產的，通過翻譯，或許你可以猜出來，名字中帶 legacy 的檔案大概率就是瀏覽器的兼容檔案，那么事實到底是不是這樣呢？
如果你足夠細心，其實你應該可以從上面 Vite 的配置項代碼中嗅到一絲端倪，在 Vite 的組態檔中，有一個名為 @vitejs/plugin-legacy 的插件，它的名字也包含 legacy，Vite 官網中對這個插件的解釋是這樣的：
“傳統瀏覽器可以通過插件 @vitejs/plugin-legacy 來支持，它將自動生成傳統版本的 chunk 及與其相對應 ES 語言特性方面的 polyfill，兼容版的 chunk 只會在不支持原生 ESM 的瀏覽器中進行按需加載，”
也就是說，這個插件它不但提供了低版本瀏覽器的兼容能力，還提供了檢測是否支持原生 ESM 的能力，那么這個插件都做了哪些事？
主要是以下三點：
-
為最每個生成的 ESM 模塊化方式的 chunk 也對應生成一個 legacy chunk，同時使用 @babel/preset-env 轉換（沒錯，Vite 的內部集成了 Babel），生成一個 SystemJS 模塊，關于 SystemJS 可以看點擊這里查看，它在瀏覽器中實作了模塊化，用來加載有依賴關系的各個 chunk，
-
生成 polyfill 包，包含 SystemJS 的運行時，同時包含由要兼容的目標瀏覽器版本和代碼中的高級語法產生的 polyfill，
-
生成
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549075.html
標籤：其他
上一篇：Vue2依賴收集原理