大家好，很高興又見面了，我是"進階前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!
進階前端進階
前言
Vite 和 Snowpack 都是非常優秀的前端建構工具，旨在提高生産力和改善開發人員體驗。 在本文中，我們将詳細比較 Vite 與 Snowpack 以确定如何以及何時使用這兩個建構工具。話不多說，直接開始。
1.Vite vs. Snowpack
1.1 Vite是什麼
Vite是由 Vue.js 的建立者 Evan You 推出的下一代前端建構工具。 它是官方 Vue CLI 的替代品，速度非常快。Vite利用原生 ES 子產品并使用 Rollup 處理開發和打包工作。 從功能上講，它的工作方式類似于預配置的 webpack 和 webpack-dev-server，但在速度方面具有無可比拟的優勢。
1.2 Snowpack是什麼
Snowpack 是一種自稱“快如閃電”的前端建構工具，專為現代網絡設計。 Snowpack 是開發工作流程中更複雜打包器（如 webpack 或 Parcel）的替代品。 與 Vite 類似，它利用 JavaScript 的原生子產品系統（稱為 ESM）來避免不必要的工作并保持快速，同時做到建構速度與項目體積無關。
Vite 和 Snowpack 都是快速發展的前端建構工具，專注于通過盡可能高效地建構前端應用程式來改善開發人員的體驗。在接下來的章節中，将深入探讨 Vite 和 Snowpack 的更多功能以及如何在開發過程中使用。
2.腳手架
2.1 Vite
使用 CLI @vite/create-app 建構一個 Vue 和 Vite 項目。為此，可以在終端中運作以下任一指令：
// 使用 npm
npm init @vitejs/app my-vite-app --template vue
// 使用 yarn
yarn create @vitejs/app my-vite-app --template vue 可以使用以下支援的模闆之一啟動 Vite 應用程式：
- vanilla
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
完成後，cd 到項目目錄，安裝依賴項，然後啟動開發伺服器：
// 使用 npm
npm run dev
// 使用 yarn
yarn dev 請注意，盡管在示例中使用 Vite 和 Vue.js，但 Vite 也可以在 React、Preact 或 Vanilla JavaScript 應用程式中使用。
通過在項目根目錄的 vite.config.js 或 vite.config.ts 檔案中添加更多選項，可以擴充和配置 Vite，進而擴充預設配置。
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
// Load env file based on `mode` in the current working directory.
// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
const env = loadEnv(mode, process.cwd(), '')
return {
// vite config
define: {
__APP_ENV__: env.APP_ENV,
},
} 請注意，Vite 預設不加載 .env 檔案，因為要加載的檔案隻能在執行 Vite 配置後确定，例如，root 和 envDir 選項會影響加載行為。 但是，如果需要，可以使用導出的 loadEnv 幫助程式加載特定的 .env 檔案，比如上面的示例。
2.2 Snowpack
開始使用 Snowpack 的最簡單方法是使用 Create Snowpack App (CSA)。借助 CSA 工具，可以使用 CSA 官方應用程式模闆來配置 Snowpack 建構應用程式：
npx create-snowpack-app snowpack-app --template @snowpack/app-template-vue 與vite類似，也可以通過配置snowpack.config.mjs來進一步擴充打包配置。比如下面的插件例子來擴充snowpack：
// snowpack.config.mjs
// Example: enable plugins both simple and expanded
export default {
plugins: [
// Simple format: no options needed
'plugin-1',
// Expanded format: allows you to pass options to the plugin
['plugin-2', {'plugin-option': false}],
];
} 3.不同工具特征對比
Vite 和 Snowpack 都擁有很優秀的功能，這些功能會在未來繼續建構和改進。本節将繼續讨論這些打包 JavaScript 工具的一些相似和不同的特性。
3.1 Vite特征
HMR
Vite 提供了一個 HMR API， HMR 在應用程式運作時交換、添加或删除子產品，無需完全重新加載。 這可以顯著加快開發過程，因為在對應用程式進行更改時會保留應用程式狀态。 如果對任何檔案進行更改，會注意到更改的反映速度比普通 Vue 或 React 應用程式快得多。
export const count = 1
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
if (newModule) {
// newModule is undefined when SyntaxError happened
console.log('updated: count is now ', newModule.count)
}
})
} TypeScript支援
Vite 支援開箱即用的 .ts 檔案， 它使用名為 esbuild 的極其快速的 JavaScript 打包器将 TypeScript 代碼轉換為 JavaScript。
esbuild 是由Go 編寫一個快速的 JavaScript 打包器，主要目标是帶來建構工具性能的提升，并在此過程中建立易于使用的現代打包器。
npm 依賴解析
支援本機 ES 導入，不支援裸子產品導入，例如：
import { createApp } from 'vue' 這樣的導入會在浏覽器中抛出錯誤，因為它不是 node_modules 檔案夾中包位置的相對路徑。
Vite 在提供的所有 JavaScript 檔案中檢測到此類裸子產品導入，并将它們重寫為解析路徑以反映包在 node_modules 檔案夾中的位置，以便浏覽器可以正确處理它們。
配置
要在 Vite 中擴充項目的配置，請擴充項目根目錄下 vite.config.js 或 vite.config.ts 檔案位置中的預設配置選項。
export default defineConfig({
optimizeDeps: {
include: ['linked-dep'],
},
build: {
commonjsOptions: {
include: [/linked-dep/, /node_modules/],
},
},
}) 檔案支援
Vite 開箱即用地支援 Vue 3 單檔案元件 、Vue 3 JSX 元件和 Vue 2 元件。 它還支援 JSX 檔案（.jsx、.tsx）、CSS 檔案導入、PostCSS、CSS 子產品和 CSS 預處理器，如 Sass、LESS 和 Stylus。
import classes from './example.module.css'
document.getElementById('foo').className = classes.red 3.2 Snowpack特性
即時啟動
Snowpack 的非打包開發伺服器啟動時間為 50 毫秒或更短，并且即使項目規模擴大也能保持快速。
一次建構，永久緩存
印象最深的功能之一是 Snowpack 在一次建構後緩存檔案的能力。 這是通過浏覽器中 JavaScript 的本機子產品系統實作的。
支援打包的cacheDirPath、cache等擴充配置來提升緩存。
HMR
與 Vite 類似，Snowpack 提供了一個 HMR API。 在建構 Snowpack 支援的應用程式時，對檔案所做的更改會立即反映在浏覽器上。
Snowpack 是通過 esm-hmr 規範實作 HMR，這是一個基于 ESM 的熱子產品更換 (HMR) 的嘗試标準。
// HMR Code Snippet Example
if (undefined /* [snowpack] import.meta.hot */ ) {
undefined /* [snowpack] import.meta.hot */ .accept(({module}) => {
// Accept the module, apply it into your application.
});
} 優化生産
Snowpack 具有由 esbuild 提供支援的内置優化管道。 Snowpack 官方文檔還建議使用 @snowpack/plugin-webpack 插件優化 Snowpack 支援的應用程式。
// snowpack.config.mjs
export default {
plugins: [
[
'@snowpack/plugin-webpack',
{
extendConfig: (config) => {
config.plugins.push(/* ... */);
return config;
},
},
],
],
}; 4.建構時間和伺服器啟動時間
可以在 300 毫秒内在 Vite 中啟動開發伺服器，因為不需要打包或編譯。 相反，當打開 Vite 應用程式時，将從伺服器獲得 index.html。 然後浏覽器将讀取 index.html 并知道如何解析 Native-ES-Module 代碼。
與 Vite 一樣，Snowpack 的建構時間非常快，因為它在開發過程中提供未打包的檔案。 是以，Snowpack 中的開發伺服器可以在 50 毫秒或更短的時間内啟動。
使用 Snowpack，項目中的每個檔案都可以解釋為函數，其中輸入是檔案的内容，輸出是它的緩存版本。 由于根本沒有進行任何打包，是以本地開發伺服器會立即啟動，并且隻處理給定時間點所需的檔案。 這意味着即使的項目變得非常大，啟動時間的影響也降低到最低。
5.生産部署
Vite 使用 Rollup 進行生産打包，同時因為是基于 ESM 的，是以可以生産更小的 bundle。 Vite 0.16.4 及更高版本支援異步塊和 https 模式的自動 CSS 代碼拆分，這兩者都可以提高生産建構的性能。
要在 Snowpack 中将站點建構為 Web 原生 JS、CSS 和 HTML 檔案，可以使用 snowpack build。 這種“非打包式”部署對于小型站點來說已經足夠了，但許多開發人員更願意優化和打包最終站點以提高生産性能。
Snowpack 還可以在最終建構上運作各種優化以處理遺留浏覽器支援，包括：代碼壓縮、代碼拆分、tree shaking、死代碼消除、預加載、打包等。
6.社群和生态
Vite
盡管 Vite 的第 1 版是在 2020 年 10 月才釋出的，但 Vite.js 團隊仍在不斷地進行改進（例如，最近在 2021 年 1 月，Vite 現已支援全局導入）。
迄今為止，已知有超過 945k 個存儲庫在 Vite 上運作，超過 745 名開發人員為該存儲庫做出了貢獻。
Snowpack
Snowpack 已經存在了一段時間，并且有超過 403 名開發人員為其在 GitHub 上的存儲庫做出貢獻。 已知還有近 4,700 個存儲庫在 Snowpack 上運作。
有趣的是，盡管Vite是新來者，但 Vite 的采用率比 Snowpack 增長更快。下面是Vite和Snowpack在過去一年的下載下傳量資料對比。
下圖是Vite和Snowpack的Github資料對比。從Github的star來說，Vite已經達到了驚人的53K，而snowpack隻有19k，而且兩者項目建立的時間都是3年前。
總體來說，snowpack雖然是一個很優秀的打包架構，但是和後起之秀Vite相比還有一定的差距，幾乎是“未火已衰”的狀态。是以，從打包架構的采用率來看，還是非常建議大家嘗試Vite，或者使用Vite來替代snowpack。
6.學習曲線
Vite 和 Snowpack 都很容易上手，因為它們都有一個 CLI，可用于搭建一個帶有已配置包的新項目。 是以，這兩種建構工具的學習曲線都相當低，尤其是與 webpack 等 JavaScript 打包器相比（盡管webpack可能具有更多功能）。
7.結論
Vite 和 Snowpack 都擁有令人難以置信的打包速度，在一定程度上都是通過使用無打包開發環境實作的。
雖然很難預測 web 開發的未來，但可以肯定地說，Vite 和 Snowpack 都是可以嘗試的方案！大家打包項目用的是Vite還是SnowPack呢？當然，因為篇幅有限，文章并沒有過多展開，如果有興趣，文末的參考資料提供了大量優秀文檔以供學習。
參考資料
https://blog.logrocket.com/vite-vs-snowpack-a-comparison-of-frontend-build-tools/
https://blog.sessionstack.com/understanding-snowpack-the-next-generation-javascript-bundler-c541a3efe54d
https://github.com/FredKSchott/snowpack/tree/main/plugins/plugin-webpack
https://www.snowpack.dev/