2020年：前端開發的痛苦與快樂

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

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

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

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

Nuxt

https://nuxtjs.org/

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

Vuestic Dashboard

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

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

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

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

為什么？

Docker 開發環境的出現，極大提高了 JavaScript 陣營的整體實力。

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

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

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

解決方案: esbuild

https://github.com/evanw/esbuild

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

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

這是怎么做到的？

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

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

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

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

但在看到 Vite 在編譯新儀表板時的出色表現，我發現一切都物有所值。

Vite 的提速原理

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

ES 模塊

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

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

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

Vite 會聰明地在適當的地方“偷工減料”，而且不需要把 JS 文件捆綁到開發 build 當中。

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

結果

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