不久之前，我開始為自己的新項目構(gòu)建一套儀表板。這套儀表板中包含一個 Node.js API 網(wǎng)關(guān)（仍處于起步階段），外加用于記錄的 Clickhouse：

https://github.com/restyler/api-gateway

這就引出了本文的主題：很多朋友可能沒有意識到，膨脹已經(jīng)成為前端世界中的頭號難題。轉(zhuǎn)譯器、捆綁器、編譯器再加上觀察器，負責在保存過程中對項目進行重新編譯、在瀏覽器中進行熱重載，而這一切都讓普通 JAVAScript 開發(fā)者陷入了無窮無盡的苦難當中。

下面我為大家列出一份與 Vue 相關(guān)的項目清單，正是它們給我過去半年里的開發(fā)工作帶來諸多麻煩（全部使用 15 英寸與 16 英寸 macBook Pro 設(shè)備）：

Nuxt

https://nuxtjs.org/

啟動器應(yīng)用的可調(diào)整空間太小，讓 Macbook 用戶們感到頭痛不已。瀏覽器會不斷進行熱重載，GitHub 上的 Nuxt 項目問題隊列中有很多評論都指向這方面內(nèi)容。

Vuestic Dashboard

https://github.com/epicmaxco/vuestic-admin

我其實很喜歡這款 Vue 儀表板的設(shè)計與細節(jié)，因此打算稍作調(diào)整用在自己的項目里。在 Docker 中（Macbook Pro 16 英寸），它的開發(fā)者模式啟動時長經(jīng)常會超過 2 分鐘，而 com.docker.hyperkit 顯示 CPU 占用率達 400%。考慮到設(shè)備中只有 4 GB 內(nèi)存專供 Docker 使用，可以想見它在這臺 Macbook Pro 上根本無法構(gòu)建生產(chǎn)版本的文件。很明顯，它應(yīng)該想辦法使用 6 GB 內(nèi)存外加“指派”存儲卷進行 Docker 設(shè)置，目前我已經(jīng)根據(jù) VS Code 說明文檔的指示完成了這項調(diào)整：

https://code.visualstudio.com/docs/remote/containers-advanced#_update-the-mount-consistency-to-delegated-for-macos

但即使是在開發(fā)者模式下保存文件這么一項簡單操作，也仍然需要至少 10 秒鐘才能完成。

為什么？

Docker 開發(fā)環(huán)境的出現(xiàn)，極大提高了 JavaScript 陣營的整體實力。

據(jù)我了解，當大家將主機操作系統(tǒng)文件夾綁定至 Docker 存儲卷時，我們實際上無法在某些 JS 項目中保存某些文件，這就導致有相當一部分文件需要使用 Chokidar 或者類似的庫進行重新編譯，這種未經(jīng)優(yōu)化的垃圾堆會極大占用硬件資源。雖然這一切與生產(chǎn)構(gòu)建無關(guān)，但單是編譯器與捆綁器就足夠讓 Macbook 和開發(fā)者忙得焦頭爛額了。

如果大家每天只需要面對一個 JS/TS 項目，而且壓根不用 Docker、只在自己的主機操作系統(tǒng)上進行開發(fā)的朋友來說，這可能不是什么大問題。但對于面對完整開發(fā)棧的群體，以上問題就根本無法接受了。跟我一樣，許許多多開發(fā)者都喜歡 VS Code Containers 項目，但這種喜愛也成為我們痛苦的根源。

沒錯，Docker 本身也有問題，但至少在最近 2、3 年中，它已經(jīng)成為我在開發(fā)工作中的必選項目。這次之所以要使用 VS Code Containers 加 Docker 進行開發(fā)，是因為這套組合在便利性、靈活性與強大的可重現(xiàn)性方面簡直無可匹敵。

解決方案: esbuild

https://github.com/evanw/esbuild

esbuild 是另一款 JavaScript 捆綁器與縮小器。下面來看看它的強大能力。

閑言少敘，咱們用圖說話：

這是怎么做到的？

1. 它使用 Go 語言編寫而成，Go 語言可以編譯為原生代碼；
2. 解析、輸出與源映射生成完全以并行化方式進行；
3. 不涉及資源成本高昂的數(shù)據(jù)轉(zhuǎn)換，只需要很少幾步即可完成所有操作。

對于像我這樣絕望的開發(fā)者來說，它的效果實在是太棒了。更重要的是，Vue 3 在其 Vite 捆綁器中內(nèi)置 esbuild，所以我意識到要想擺脫痛苦的生活，我得馬上轉(zhuǎn)移到 Vue 3 加 ESM 這片陣地上。

我將 vuestic 替換成了 v-dashboard，其使用 Vue 3 與 Tailwind。為此，我得做好學習新技術(shù)的準備：

• Tailwind；
• ES 模塊工作原理；
• Vue 3 Composition API 及其所有特性；
• 了解在哪里能夠獲得 AxIOS 的 ESM 版本以及所有相關(guān)內(nèi)容；
• 擺脫尚未全面支持 Vue 3 的 vue-chartjs，轉(zhuǎn)而適應(yīng) Chart.js。

但在看到 Vite 在編譯新儀表板時的出色表現(xiàn)，我發(fā)現(xiàn)一切都物有所值。

Vite 的提速原理

Vite 使用 ES 模塊加 esbuild 帶來了極快的處理速度。具體的提速原理就是之前提到的那三點。

ES 模塊

它其實就是我們的老朋友 Typescript 中的“import”語句。現(xiàn)在您已經(jīng)可以在各種瀏覽器中直接使用，贊！

https://kentcdodds.com/blog/super-simple-start-to-es-modules-in-the-browser

這項功能還無法支持所有網(wǎng)絡(luò)瀏覽器，也許還要再等一年才能全面普及。但它已經(jīng)可以在最新的 Chrome 與 Firefox 中正常使用，因此大家不妨考慮將其引入開發(fā)當中。

Vite 會聰明地在適當?shù)牡胤?ldquo;偷工減料”，而且不需要把 JS 文件捆綁到開發(fā) build 當中。

目前只有一個問題，esbuild 無法在編譯過程中驗證 Typescript 的正確性，但考慮到 VS Code 與 lang server 已經(jīng)完成了驗證工作，所以應(yīng)該沒什么關(guān)系。

結(jié)果

• 與之前一樣，我在開發(fā)中會使用.vue 單個文件組件與 Typescript。
• 開發(fā)啟動瞬時完成，Docker 的 CPU 負載為零，熱重載同樣可以瞬間搞定。
• 使用 axios、chart.js、高強度 toast 庫以及簡單的狀態(tài)存儲管理等元素時，相關(guān)內(nèi)容的生產(chǎn)級構(gòu)建大概需要 20 秒——與 vuestic 相比，這簡直是種巨大的轉(zhuǎn)變！

就這樣，我的日常前端開發(fā)體驗又回歸了正常范圍。這里建議大家在新項目中嘗試使用 Vite（如果您更傾向于 React 或其他框架，也可以嘗試使用 ES 模塊 +esbuild）。它雖然還不完美，仍處于 beta 測試階段，但開發(fā)者的體驗非常重要。Vite，絕對值得一個機會！

延伸閱讀：

https://pixeljets.com/blog/frontend-dev-gets-better/