精讀《新一代前端構建工具對比》

本週精讀的文章是 Comparing the New Generation of Build Tools。

前端工程領域近期出了很多新工具，這些新工具都運用了一些新技術或者跨領域技術，實現了一些突破，所以有必要了解一下這些工具都有什麼特性，以及是否能夠投入生產環境。

因爲原文比較囉嗦，因此具體用法和支持細節不在這裏展開，若是想進一步瞭解細節，能夠直接閱讀 原文)。

精讀

按照從底層到上層的封裝粒度，以 esbuild、snowpack、vite、wmr 的順序介紹。

esbuild

esbuild 使用 go 語言編寫，因爲相對 node 更爲底層，且不提供 AST 操做能力，因此代碼執行效率更高，根據其官方 benchmark 介紹提速有 10～100 倍：

<img width=400 src="https://img.alicdn.com/imgextra/i1/O1CN01hzHuDP1JXuBvRgX7x_!!6000000001039-2-tps-800-170.png">

esbuild 有兩大功能，分別是 bundler 與 minifier，其中 bundler 用於代碼編譯，相似 babel-loader、ts-loader；minifier 用於代碼壓縮，相似 terser。

使用 esbuild 編譯代碼方法以下：

esbuild.build({
  entryPoints: ["src/app.jsx"],
  outdir: "dist",
  define: { "process.env.NODE_ENV": '"production"' },
  watch: true,
});

但因爲 esbuild 沒法操做 AST，因此一些須要操做 AST 的 babel 插件沒法與之兼容，致使生產環境不多直接使用 esbuild 的 bundler 模塊。

幸運的是 minifier 模塊能夠直接替換 terser 使用，能夠用於生產環境：

esbuild.transform(code, {
  minify: true,
});

因爲 esbuild 犧牲了一些包大小換取了更高的執行效率，所以壓縮後包體積會稍微大一些，不過也就是 177KB 與 165KB 的區別，幾乎能夠忽略。

esbuild 比較底層，因此能夠與後續介紹的上層構建工具結合使用，固然根據工具設計理念，是否內置，內置到什麼程度，以及是否容許經過插件替換就是另外一回事了。

snowpack

snowpack 是一個相對輕量的 bundless 方案，以前也寫過一篇 精讀 snowpack，其實 bundless 就是利用瀏覽器支持的 ESM import 特性，利用瀏覽器進行模塊間依賴加載，而不須要在編譯時進行。

跳過編譯時依賴加載能夠省不少事，好比不用考慮 tree shaking 問題，也不用爲了最終產物加速而使用緩存，至關於這些工做交給最終執行的瀏覽器了，而瀏覽器做爲最終運行時容器，比編譯時工具更瞭解應該如何按需加載。

僅從編譯時來看，修改單個文件的編譯速度與項目總體大小有關，而若不考慮總體項目，僅編譯單個文件（最多遞歸一下有限的依賴模塊，解決好比 TS 類型變量判斷問題）時間複雜度必定是 O(1) 的。

實際上咱們不多單獨使用 snowpack，由於其編譯使用的 esbuild 還未達到 1.0 穩定版本，在生態兼容與產物穩定性上存在風險，因此編譯打包時每每採用 rollup 或 webpack，但這種割裂也致使了開發與生產環境不一致，這每每表明着更大的風險，所以在 vite 框架能夠看到這塊的取捨。

snowpack 是開箱即用的：

// package.json
"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build"
},

咱們還能夠增長 snowpack.config.js 配置文件開啓 remote 模式：

// snowpack.config.js
module.exports = {
  packageOptions: {
    "source": "remote",
  }
};

remote 模式是 Streaming Imports，即不用安裝對應的 npm 包到本地，snowpack 自動從 skypack 讀取文件並緩存起來。

snowpack 看起來更可能是對 bundless 純粹的嘗試，而不是一個適合知足平常開發的工具，由於平常開發須要一個一站式工具，這就是後面說的 vite 與 wmr。

vite

能夠理解爲結合了 snowpack 特點的一站式構建工具，從開發到發佈全套流程都幫你搞定。

涉及的用法很是多，具體內容能夠看 官方文檔。

與 snowpack 不一樣的是，snowpack 生產打包的產物是獨立的文件，而 vite 沒有采用 esbuild 而是 rollup 打包，目的是爲了打包爲一個總體，並規避 esbuild 不穩定的風險。

另外因爲 vite 集成化更高，比 snowpack 多了許多功能，好比 css 拆分、多頁、使用 esbuild 進行依賴預構建、monorepo 支持、對多框架支持、SSR 等等。具體能夠看 文檔介紹。然而原文說這有利有弊，好處是開箱即用，弊端是缺少定製的靈活性。

其實革命性突破主要是 bundless，在這基礎上發展出一系列便捷的功能，這值得每個工程化團隊學習。其實就算決定再造一個輪子，也是維持 90% 功能不變的基礎上，在默認的偏好設置作一些微調，而這些大多能夠用 插件 解決。

總結下來，Vite 是一個既積極擁抱新特性，又爲生產環境考慮的工程化全家桶，相比之下，技術棧過於前沿的工具只能稱爲玩具，而 Vite 是真的能夠用一用的。

wmr

由 preact 做者開發，能夠理解爲 preact 版的 vite。因此對於 preact 技術棧的開發者更加友好，集成度更高。

原文提到的另外一個特點是，wmr 使用了 htm 轉換 JSX，使其得到了更加精確的報錯體驗，便可以精確到源碼行的同時指定到具體列。

綜合功能和 vite 差很少，單頁 + ssr 都支持，若是你平時使用 preact，或者想開發一個體積極小的項目，能夠考慮用 wmr 全家桶。

總結

新一代前端構建工具最大特點有兩個：更底層的語言編寫、bundless，若是用一個詞描述就是高性能。積極擁抱瀏覽器新特性或者知識跨界均可以幫助前端領域取得新的突破。

另外構建工具已經變得愈來愈集成化，從僅用於編譯的 esbuild，到支持開發的 snowpack，再到內置了最佳實踐、甚至支持好比 ssr 等後端能力、最後到垂直場景的 vitePress，每抽象一次，都更開箱即用，但帶來的靈活性下降也成爲各團隊本身造輪子的理由，越上層越是有本身造輪子的衝動。

這和可視化領域很像，可視化從最底層的 svg、canvas、webgl 到基於其封裝的命令式框架，再到數據驅動開發框架、徹底 JSON 配置化的圖表庫、甚至到零配置，根據數據猜配置的智能化項目，也是配置愈來愈少，但靈活度愈來愈低，使用什麼層次的徹底看項目對細節的要求。

不過工程化相對仍是標準化的，由於可視化面向的是用戶，而工程化面向的是程序員，咱們不能控制用戶需求，但能夠控制程序員的開發習慣 :P。

最後，除了升級你的共建工具外，換一臺 M1 芯片電腦也能夠極大提高開發效率，筆者親測 webpack 構建速度提高 3 倍！

討論地址是： 精讀《新一代前端構建工具對比》· Issue #316 · dt-fe/weekly

若是你想參與討論，請 點擊這裏，每週都有新的主題，週末或週一發佈。前端精讀 - 幫你篩選靠譜的內容。

關注 前端精讀微信公衆號

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

版權聲明：自由轉載-非商用-非衍生-保持署名（ 創意共享 3.0 許可證）