提高10倍打包速度的神奇工具：Snowpack 2.0發(fā)布，再也不需要打包器！
前言
發(fā)布了超過 40 個 Beta 版本和候選版本之后，我們很高興地宣布，Snowpack 2.0 在今天正式發(fā)布了。
Snowpack 2.0 是一套為現(xiàn)代 Web 打造的構建系統(tǒng)。其特性包括：
- 啟動時間不到 50ms，在大型項目中速度也不會打折扣。
- 無打包開發(fā)與生產(chǎn)構建打包。
- 內(nèi)置對 TypeScript、JSX 和 CSS 模塊等特性的支持。
- 可與 React、Preact、Vue、Svelte 和所有你喜歡的庫一起使用。
- Create Snowpack App（CSA）入門模板：
- https://www.snowpack.dev/#create-snowpack-app-(csa)
- # install with npm
- npm install --save-dev snowpack
- # install with yarn
- yarn add --dev snowpack
邁向 Snowpack 2.0 之路
Snowpack 1.0 是針對一個簡單任務而設計的：安裝 npm 軟件可以直接在瀏覽器中運行。它背后的理念是，JavaScript 包是在開發(fā)過程中唯一 需要 使用打包器（bundler）的東西；只要能去掉這個要求，不再需要打包器，我們就能加快所有人的 Web 開發(fā)速度。
結果 Snowpack 大獲成功。成千上萬的開發(fā)人員開始使用 Snowpack 來安裝他們的依賴項，簡化了構建網(wǎng)站時使用的工具鏈。一夜之間，一種速度更快，更輕量級的開發(fā)環(huán)境呈現(xiàn)在人們面前。
Snowpack 2.0 則是為了這個 Web 開發(fā)的新時代而設計的構建系統(tǒng)。Snowpack 利用原生 ES 模塊（ESM）支持，將構建好的文件直接提供給瀏覽器，這樣你的開發(fā)環(huán)境就不再需要打包器了。它不僅是一種速度更快的工具，更是一種全新的 Web 構建系統(tǒng)和構建方法。
O(1) 構建系統(tǒng)的興起
打包（bundling）是一種復雜度為 O(n) 的過程。當你更改一個文件時，你不能只重建這個文件。你往往需要針對多個相關文件，重建并重新打包應用程序中的一整塊內(nèi)容，這樣才能正確完成更改過程。
Snowpack 則是一個復雜度為 O(1) 的構建系統(tǒng)。這個術語最初是由 Ives van Hoorne 提出的，它完美地體現(xiàn)了我們的 Web 開發(fā)未來愿景。用 Snowpack 構建的每個文件都可以表示為一個函數(shù)：build(file) => result。在開發(fā)過程中更改某個文件時，只需重建這一個文件就夠了。
與傳統(tǒng)的打包開發(fā)方法相比，它有諸多優(yōu)點：
- O(1) 構建速度更快。
- O(1) 構建是可預測的。
- O(1) 構建易于推理和配置。
- 項目規(guī)模不會影響開發(fā)期間的構建時間。
- 單個文件能更好地緩存。
最后一點很關鍵：每個構建的文件都會單獨緩存，可隨時重用。如果你從不更改某個文件，那就永遠用不著重新構建它了。
dev：更快的開發(fā)環(huán)境
運行 snowpack dev 就可以啟動新的 Web 開發(fā)環(huán)境了，你會注意到的第一件事，就是 O(1) 構建工具鏈的速度竟然如此之快。Snowpack 的啟動時間不到 50 毫秒。這里的單位沒寫錯：是不超過 50 毫秒。
因為無需啟動打包工作，所以服務器可以立即啟動。在首次加載頁面時，Snowpack 會構建你請求的第一批文件，然后將它們緩存起來以備將來使用。就算你的項目中包含一百萬個不同的文件，Snowpack 也只會構建加載當前頁面所需的那些文件而已。這就是為什么 Snowpack 能夠一直提供飛快的運行速度。
snowpack dev 包括一個開箱即用的開發(fā)服務器，和一系列熟悉的功能：
- TypeScript 支持
- JSX 支持
- 熱模塊更換（HMR）
- 導入 CSS 和 CSS 模塊
- 導入圖像和其他資產(chǎn)
- 自定義路由
- 代理請求
自定義構建
使用 Snowpack 內(nèi)置的構建腳本，你就可以連接自己喜歡的那些構建工具。
https://www.snowpack.dev/#build-scripts
在 Snowpack 中，你可以將每個構建表示為一個線性的"輸入 ->構建 ->輸出"工作流程。這樣一來，Snowpack 便可以將文件納入任何現(xiàn)有的 UNIX-y CLI 工具的管道，或者從管道中提取出來，而無需專門的插件生態(tài)系統(tǒng)支持。
- // snowpack.config.json
- {
- "scripts": {
- // Pipe every "*.css" file through the PostCSS CLI
- // stdin (source file) > postcss > stdout (build output)
- "build:css": "postcss",
- }
- }
如果你用過 package.json 的“scripts”配置，應該會很熟悉這種格式。我們很喜歡這種直接使用 CLI，而無需非必要插件系統(tǒng)的簡單方法。我們希望這種模式能提供與之類似的直觀設計。
如果你想更好地掌控自己的構建（或者想編寫自己的構建工具），Snowpack 還支持第三方 JavaScript 插件
https://www.snowpack.dev/#build-plugins
可以查看我們的文檔以了解有關自定義構建的更多信息
https://www.snowpack.dev/#build-scripts
bulid 為生產(chǎn)環(huán)境打包
需要明確的是，Snowpack 并不反對生產(chǎn)環(huán)境中的打包。實際上我們推薦這種方法。在打包過程中的文件縮小、壓縮、移除無用代碼和網(wǎng)絡優(yōu)化等操作，都能讓你的站點運行得更快，給用戶帶來更好的體驗；這也是所有構建工具的終極目標。
Snowpack 將打包視為一種只用在最后一步，且只針對生產(chǎn)環(huán)境的構建優(yōu)化過程。將打包放在最后一步后，你就不會將構建邏輯和打包邏輯混在同一個巨大的配置文件中了。相比之下，你的打包器可以獲取已構建好的文件，并專注于它最擅長的工作：打包。
Snowpack 維護了一套針對 Webpack 和 Parcel 的官方插件。你可以選擇自己喜歡的那一款，然后運行 snowpack build 來構建生產(chǎn)站點。
- // snowpack.config.json
- {
- // Optimize your production builds with Webpack
- "plugins": [["@snowpack/plugin-webpack", {/* ... */}]]
- }
如果你不想使用打包器也是可以的。Snowpack 的默認構建將為你提供一個沒有打包過的網(wǎng)站，它運行起來也不會有任何問題。這就是 Snowpack 項目從一開始就堅持的理念：你想用打包器的時候才會用它，不想用的時候就可以不用，沒有硬性要求。
現(xiàn)在就嘗試 Snowpack
我們很高興能和大家分享所有這些內(nèi)容，現(xiàn)在就下載 Snowpack，體驗 Web 開發(fā)的未來吧。
- npm i snowpack@latest --save-dev
如果你已經(jīng)裝過 Snowpack 應用程序，那么 Snowpack 2.0 會引導你更新那些過時的配置。Snowpack 原來的軟件包安裝程序仍然可以正常運行，而且現(xiàn)在有了新的 dev 和 build 命令，Snowpack 甚至可以為你管理 Web 軟件包。
請查看我們的文檔站點以了解更多信息
https://www.snowpack.dev/
創(chuàng)建 Snowpack 應用
入門 Snowpack 的最簡單方法是使用 Create Snowpack App（CSA）模板。CSA 使用預先配置的，由 Snowpack 驅動的開發(fā)環(huán)境為你自動初始化一個入門應用程序。
- npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]
Snowpack 的模板包括：
- @snowpack/app-template-blank
- @snowpack/app-template-react
- @snowpack/app-template-react-typescript
- @snowpack/app-template-preact
- @snowpack/app-template-svelte
- @snowpack/app-template-vue
- @snowpack/app-template-lit-element
- @snowpack/app-template-11ty
這里可以查看 snowpack 社區(qū)提供的模板：
https://github.com/pikapkg/create-snowpack-app
感謝超過 80 位貢獻者為新版做出的努力，編程愉快！
