1、新一代前端構(gòu)建工具對比精讀 根據(jù)從底層到上層的封裝粒度，以 esbuild、snowpack、vite、wmr 的挨次介紹。 esbuild esbuild 用法 go 語言編寫，因?yàn)橄鄬?node 更為底層，且不提供 ast 操作能力，所以代碼執(zhí)行效率更高，按照其官方 benchmark 介紹提速有 10——100 倍： esbuild 有兩大功能，分離是 bundler 與 minifier，其中 bundler 用于代碼編譯，類似 babel-loader、ts-loader；minifier 用于代碼壓縮，類似 terser。 用法 esbuild 編譯代碼辦法

2、如下： esbuild.build( entrypoints: "src/app.jsx", outdir: "dist", define: "process.env.node_env": &39;"production"&39; , watch: true, ); 但因?yàn)?esbuild 無法操作 ast，所以一些需要操作 ast 的 babel 插件無法與之兼容，導(dǎo)致生產(chǎn)環(huán)境很少挺直用法 esbuild 的 bundler 模塊。 幸運(yùn)的是 minifier 模塊可以挺直替換 terser 用法，可以用于生產(chǎn)環(huán)

3、境： esbuild.transform(code, minify: true, ); 因?yàn)?esbuild 犧牲了一些包大小換取了更高的執(zhí)行效率，因此壓縮后包體積會略微大一些，不過也就是 177kb 與 165kb 的區(qū)分，幾乎可以忽視。 esbuild 比較底層，所以可以與后續(xù)介紹的上層構(gòu)建工具結(jié)合用法，固然按照工具設(shè)計理念，是否內(nèi)置，內(nèi)置到什么程度，以及是否允許通過插件替換就是另一回事了。 snowpack snowpack 是一個相對輕量的 bundless 計劃，之前也寫過一篇 精讀 snowpack，其實(shí) bundless 就是利用掃瞄器支持的 esm import 特性，利用掃瞄

4、器舉行模塊間依靠加載，而不需要在編譯時舉行。 跳過編譯時依靠加載可以省無數(shù)事，比如不用考慮 tree shaking 問題，也不用為了終于產(chǎn)物加速而用法緩存，相當(dāng)于這些工作交給終于執(zhí)行的掃瞄器了，而掃瞄器作為終于運(yùn)行時容器，比編譯時工具更了解應(yīng)當(dāng)如何按需加載。 僅從編譯時來看，修改單個文件的編譯速度與項(xiàng)目整體大小有關(guān)，而若不考慮整體項(xiàng)目，僅編譯單個文件（最多遞歸一下有限的依靠模塊，解決比如 ts 類型變量推斷問題）時光復(fù)雜度一定是 o(1) 的。 事實(shí)上我們很少單獨(dú)用法 snowpack，由于其編譯用法的 esbuild 還未達(dá)到 1.0 穩(wěn)定版本，在生態(tài)兼容與產(chǎn)物穩(wěn)定性上存在風(fēng)險，所以編譯打

5、包時往往采納 rollup 或 webpack，但這種割裂也導(dǎo)致了開發(fā)與生產(chǎn)環(huán)境不全都，這往往代表著更大的風(fēng)險，因此在 vite 框架可以看到這塊的取舍。 snowpack 是開箱即用的： / package.json "scripts": "start": "snowpack dev", "build": "snowpack build" , 我們還可以增強(qiáng) snowpack.config.js 配置文件開啟 remote 模式： / snowpack.config.js module.exp

6、orts = packageoptions: "source": "remote", ; remote 模式是 streaming imports，即不用安裝對應(yīng)的 npm 包到本地，snowpack 自動從 skypack 讀取文件并緩存起來。 snowpack 看起來更多是對 bundless 純粹的嘗試，而不是一個適合滿足日常開發(fā)的工具，由于日常開發(fā)需要一個一站式工具，這就是后面說的 vite 與 wmr。 vite 可以理解為結(jié)合了 snowpack 特色的一站式構(gòu)建工具，從開發(fā)到發(fā)布全套流程都幫你搞定。 涉及的使用十分多，詳細(xì)內(nèi)容可以看 官方文

7、檔。 與 snowpack 不同的是，snowpack 生產(chǎn)打包的產(chǎn)物是自立的文件，而 vite 沒有采納 esbuild 而是 rollup 打包，目的是為了打包為一個整體，并規(guī)避 esbuild 不穩(wěn)定的風(fēng)險。 另外因?yàn)?vite 集成化更高，比 snowpack 多了許多功能，比如 css 拆分、多頁、用法 esbuild 舉行依靠預(yù)構(gòu)建、monorepo 支持、對多框架支持、ssr 等等。詳細(xì)可以看 文檔介紹。然而原文說這有利有弊，益處是開箱即用，弊端是缺乏定制的靈便性。 其實(shí)革命性突破主要是 bundless，在這基礎(chǔ)上進(jìn)展出一系列便捷的功能，這值得每一個工程化團(tuán)隊學(xué)習(xí)。其實(shí)就算打算再造一個輪子，也是維持 90% 功能不變的基礎(chǔ)上，在默認(rèn)的偏好設(shè)置做一些微調(diào)，而這些大多可以用 插件 解決。 總結(jié)下來，vite 是一個既樂觀擁抱新特性，又為生產(chǎn)環(huán)境考慮的工程化全家桶，相比之下，技術(shù)棧過于前沿的工具只能稱為玩具，而 vite 是真的可以用一用的。 wmr 由 preact 作者開發(fā)，可以理解為 preact 版的 vite。所以對于 preact 技術(shù)棧的開發(fā)者越發(fā)友好，集成度更高。 原文提到的另一個特色是，wmr 用法了 htm 轉(zhuǎn)換 j