前端打包工具大亂斗

背景和痛點

過去很長一段時間，人們使用 webpack，或基于 webpack（taro）的插件系統，構建復雜應用

隨著項目復雜度的升高，一層層 loader 和 plugin，將開發(fā)鏈路大大延長

過長的開發(fā)鏈路，除了打包時間變慢，更重要的是嚴重影響力調試，測試，維護

除此之外，case by case 的 AST 轉譯方式，擅自扭曲語法語義，也是很不地道的行為

從去年開始大家開始意識到這個問題，開始制造鏈路更短，開發(fā)體驗更好的打包工具，前端進入打包工具大亂斗的 2021 年

第一類：vite/snowpack/wmr

其中一類是基于 native module 機制開發(fā) bundless 工具，比如 vite，snowpack，wmr

其中 vite 的作者是知名前端框架 vue 的作者，wmr 的作者則是 preact 團隊

https://github.com/vitejs/vite

https://github.com/snowpackjs/snowpack

https://github.com/preactjs/wmr

這類工具的機制是一模一樣的，本質上是一個 dev server，面向的目標群體是現代 web 應用，比較重要的是對 ssr 的實現

svelte/roolup 作者開源一種 native module 跑到 node 的思路，被 vite，snowpack 所使用

https://github.com/sveltejs/kit

因為 ssr 同構是必須將 native module 跑到 node 端的

與此同時，這類框架還需要借助 rollup 或 esbuild 進行打包和預處理

所以與其說他們是打包工具，不如說他們是不依賴 webpack 的構建工具

第二類：wepack/metro

前面的第一類工具主要是針對現代瀏覽器，而非 web 平臺，也有對應的替代方案

比如 metro 是專門用來打包 RN 的，它的作者是 facebook 官方，未來會成為 RN 的標配

https://github.com/facebook/metro

wepack 是專門用來打包微信小程序的，它的作者是 fre 作者 132

https://github.com/ctripcorp/wepack

這一類工具的共同特點是，他們都是因為非 web 平臺產生，并服務于這特定場景

因為 js 不再是一等公民，通常這類工具無法使用 rollup，esbuild 等工具

但無論如何目的都是一樣的——拋棄 webpack

第三類：esbuild/swr

第三類工具則以 esbuild 為代表，它的作者是大名鼎鼎的 figma CTO

https://github.com/evanw/esbuild

這類工具通常使用非 js 語言，利用其他語言的天賦來提升編譯速度

比如前面提到的 vite 就使用 esbuild 進行預編譯

總結

工具眾多，大家除了根據自己的業(yè)務嘗試新型框架，更重要的是理解這些框架的內在

另外，對于公司而言，歷史包袱先于新業(yè)務，鏟平一座 shi 山的意義遠大于開始一個新項目

所以這些工具其實都不是對標歷史債務的

該自己扛的，還得自己扛