Snowpack 摸魚！Vite 接管！

大家好，很高興又見面了，我是"進階前端‬進階‬"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發！

進階前端‬進階

1.什麼是ESM？

ESM 代表 EMACScript 子產品。 它是 JavaScript 語言規範的最新補充，用于處理如何在 Javascript 應用程式中加載子產品。在 ES6 之前，JS 不支援子產品化，對于大型項目的開發很不友好，是以社群出現了 CommonJS 、 AMD 、CMD、UMD等規範，但在 ES6 中引入 ESM 之後，JS 從此有了自己的子產品體系，CommonJS/CMD/AMD/UMD 也不再需要。

值得注意的是，Chrome >61、Safari > 11、Firefox > 60、Edge > 16、Opera > 48 等主流浏覽器都已經原生支援 ESM，ESM在短短的幾年經曆了非常快速的發展。

2.什麼是Snowpack

Snowpack 也是一個無打包（No-Bundler）的原生 ESM 開發伺服器，在範圍上與 Vite 非常相似。 除了不同的細節外，這兩個項目在與傳統工具相比的技術優勢方面有很多共同之處。 Vite 的依賴預打包也受到了 Snowpack v1（現在的 esinstall）的啟發。

什麼是Snowpack

那麼标題為什麼說SnowPack摸魚呢？那是因為根據Vite的官方描述：Snowpack項目已經不再維護。 Snowpack 團隊正在積極開發 Astro，這是一個由 Vite 提供支援的靜态網站建構器。 但是，Astro 團隊是生态中的活躍參與者，也在幫助改進 Vite。

下面是來自Vite官方的說明：

Snowpack was also a no-bundle native ESM dev server, very similar in scope to Vite. The project is no longer being maintained. The Snowpack team is now working on Astro, a static site builder powered by Vite. The Astro team is now an active player in the ecosystem, and they are helping to improve Vite.

3.Vite vs Snowpack差異

3.1 生産建構差異

Snowpack 的預設建構輸出是未打包的：它将每個檔案轉換為單獨的構模組化塊，然後可以将這些子產品提供給執行實際打包的不同“優化器”。 這樣做的好處是可以在不同的終端打包器之間進行選擇以滿足特定需求（例如： webpack、Rollup 甚至 esbuild），缺點是它有點碎片化的體驗。

例如，esbuild 優化器仍然不穩定 ，Rollup優化器無官方維護，不同優化器輸出和配置不同。

Vite 選擇與單個打包器（Rollup）進行更深入的內建，以提供更精簡的體驗。 它還允許 Vite 支援适用于開發和建構的通用插件 API。

Vite 選擇與單個打包器（Rollup）進行更深入的內建

由于更內建（Integrated）的建構過程，Vite 支援廣泛的功能，這些功能目前在 Snowpack 建構優化器中不可用：

• 多頁面支援（Multi-Page Support）
• 庫模式（Library Mode）
• 自動 CSS 代碼拆分
• 優化的異步塊加載
• 官方遺留模式插件，可生成雙重制代/遺留打包雙輸出，并根據浏覽器支援自動提供正确的包。

3.2 更快的依賴預打包

圖檔來自：https://bestofjs.org/projects/esbuild

Vite 使用 esbuild 而不是 Rollup 來進行依賴預打包。 這會在伺服器冷啟動和依賴失效重新綁定方面顯著提高性能。

3.3 單體（Monorepo）倉庫支援

Vite 旨在處理 monorepo 設定，有使用者成功地将它與 Yarn、Yarn 2 和基于 PNPM 的 monorepos 一起使用。

圖檔來自：https://monorepo.tools/

在 monorepo 設定中，依賴項可能是來自同一 repo 的連結包。 Vite 會自動檢測未從 node_modules 解析的依賴項，并将連結的依賴項視為源代碼。 它不會嘗試打包連結的 dep，而是分析連結的 dep 的依賴清單。

但是，這需要将連結的 dep 導出為 ESM。 如果沒有，可以在配置中添加對 optimizeDeps.include 和 build.commonjsOptions.include 的依賴。

export default defineConfig({
  optimizeDeps: {
    include: ['linked-dep'],
  },
  build: {
    commonjsOptions: {
      include: [/linked-dep/, /node_modules/],
    },
  },
})           

3.4 CSS 預處理器支援

Vite 為 Sass 和 Less 提供了更精細的支援，包括改進的@import 解析（别名和 npm 依賴項）和内聯檔案的自動 url() 變基。

import classes from './example.module.css'
document.getElementById('foo').className = classes.red           

注意：任何以 .module.css 結尾的 CSS 檔案都被Vite認為是 CSS 子產品檔案。導入這樣的檔案将傳回相應的子產品對象。

3.5 一流的 Vue 支援

Vite 最初是作為 Vue.js 工具的未來基礎而建立的。 盡管從 2.0 開始，Vite 已完全與架構無關，但官方 Vue 插件仍然為 Vue 的單檔案元件格式提供一流的支援，涵蓋所有進階功能。如模闆資源引用解析、<script setup>、<style module>、 自定義塊等等。 此外，Vite 還為 Vue SFC 提供了細粒度的 HMR。 例如，更新 SFC 的 <template> 或 <style> 将執行熱更新而不重置其狀态。

• 通過@vitejs/plugin-vue 支援 Vue 3 SFC
• 通過@vitejs/plugin-vue-jsx 支援 Vue 3 JSX
• 通過@vitejs/plugin-vue2 支援 Vue 2.7
• Vue <2.7 通過 vite-plugin-vue2 支援

4.社群和生态

4.1 Vite

盡管 Vite 的第 1 版是在 2020 年 10 月才釋出的，但 Vite 團隊仍在不斷地進行改進（例如，最近在 2021 年 1 月，Vite 現已支援全局導入）。 迄今為止，已知有超過 945k 個存儲庫在 Vite 上運作，超過 745 名開發人員為該存儲庫做出了貢獻。

4.2 Snowpack

Snowpack 已經存在了一段時間，并且有超過 403 名開發人員為其在 GitHub 上的存儲庫做出貢獻。 已知還有近 4,700 個存儲庫在 Snowpack 上運作。

有趣的是，盡管Vite是新來者，但 Vite 的采用率比 Snowpack 更快。下面是Vite和Snowpack在過去一年的下載下傳量資料對比。

下圖是Vite和Snowpack的Github資料對比。從Github的star來說，vite已經達到了53K，而snowpack隻有19k，而且兩者項目建立的時間都是3年前。

總體來說，snowpack雖然是一個很優秀的打包架構，但是和後起之秀Vite相比還有一定的差距，幾乎是“火而不用”的狀态。

5本文總結

本文主要和大家介紹下SnowPack的退場、Vite的進場。文章從什麼是ESM、什麼是Snowpack、Vite vs Snowpack差異、社群和生态等幾個角度展開。相信通過本文的比較，大家對選擇SnowPack還是Vite都已經比較清楚了。因為篇幅有限，如果有興趣，文末的參考資料提供了大量優秀文檔以供學習。

參考資料

https://v2.vitejs.dev/guide/comparisons.html

https://vitejs.dev/guide/features.html#vue

https://github.com/FredKSchott/snowpack

https://npmtrends.com/snowpack-vs-vite

https://blog.sessionstack.com/understanding-snowpack-the-next-generation-javascript-bundler-c541a3efe54d