new

pika 開源:替代 WebPack 的全新 JS 構建工具

在過去幾年中,JavaScript打包已經從一種生產環境優化手段演變成幾乎所有WebApp都必不可少的構建步驟...

>

在過去幾年中,JavaScript 打包已經從一種生產環境優化手段演變成幾乎所有 Web App 都必不可少的構建步驟。不管你喜歡與否,打包器已經給 Web 開發帶來了巨大的複雜性,這是個不爭的事實。

為什麼要進行打包?

現在的 JavaScript 打包概念可以追溯到很早以前(大約 6 年前),那個時候我們通常會對 JavaScript 檔案進行最小化處理,或者把很多 JavaScript 檔案串成一個單獨的檔案,這樣可以加快網頁的載入速度,並解決 HTTP/1.1 的並行請求瓶頸問題。

那麼,為什麼這個優化手段會成為開發必不可少的步驟?說到這裏,我們不得不提到 npm。那個時候,npm 正在成為最大的程式碼庫註冊中心,前端開發者都十分依賴它。唯一的問題時,如果不進行打包,Node 的模組系統就無法執行在 Web 上。於是,Browserify、Webpack 之類的現代 Web 打包器出現了。

複雜性綜合徵

現如今,如果不使用像 Webpack 這樣的打包器,構建 Web App 幾乎是不可能的。你可以使用 create-react-app 建立一個專案,但它會在 node_modules 目錄下安裝 200 多 MB 的檔案,其中包含了 1300 多個不同的依賴項,而你可能只是爲了執行「Hello World!」。

其實,想要自己開發一個 JavaScript 模組系統並不難,而且一些 npm 包也可以在沒有依賴項的情況下直接在 Web 上執行。但可惜的是,大部分包仍然無法直接執行,可能是因為 npm 包的遺留依賴項或 npm 包的匯入機制所導致的。

於是,@pika/web 出現了。

GitHub 連結: https://github.com/pikapkg/web

沒有打包器的 Web App

@pika/web 通過一種新的方式來安裝 npm 依賴項,可以讓它們在瀏覽器中執行,即使它們也有自己的依賴項。它實際上並不是一個構建工具,也不是一個打包器,而是一個依賴項安裝工具,可以讓你減少對其他工具的依賴,甚至完全可以讓 Webpack 或 Parcel 直接退役了。

 複製程式碼

npm install && npx @pika/web
✔ @pika/web installed web-nativedependencies. [0.41s]

@pika/web 會檢查 package.json 的 manifest,看看有沒有匯出模組的依賴項,然在在本地 web_modules 目錄中安裝這些依賴項。

安裝好的包可以在瀏覽器中執行,因為 @pika/web 把每個包都打包到一個單獨的.js 檔案中。例如,整個 preact 包被安裝成 web_modules/preact.js。

或許你會說:「它只不過是把打包隱藏了起來,在另一個地方進行打包!」

實際上,@pika/web 確實是在內部利用了打包來輸出 Web 原生的 npm 依賴項。

@pika/web 將打包器的複雜性封裝在了一個單獨的安裝工具中,你不想配置打包器就可以不配置。當然,你也可以繼續使用你喜歡的工具:你可以繼續使用 Babel、TypeScript 來增加開發經驗,或者使用 Webpack、Rollup 來優化生產程式碼。

效能

相比其他打包器,@pika/web 的依賴項安裝方式(單個 JS 檔案)在效能方面具有更大的優勢:依賴項快取。如果使用其他打包器把依賴項打包成一個大型的 vendor.js,那麼在更新其中一個依賴項時,使用者需要重新下載整個包。而 @pika/web 則不同,更新其中一個依賴項並不會影響快取中的其他依賴項。

@pika/web 旨在解決打包器存在的問題,比如重複程式碼、冗餘程式碼導致的首次頁面載入速度變慢、升級 Webpack 生態系統導致的 bug……

另一方面,不進行打包也不是件好事。大檔案比小檔案的壓縮率更高,而且即使 HTTP/2 可以同時載入多個小檔案,但瀏覽器在發出後續請求時仍然要解析它們。

所以,我們必須在效能、快取效率和複雜性之間做出權衡,而這就是 @pika/web 存在的意義。

@pika/web 使用策略

@pika/web 已經徹底改變了我們的 Web 開發方式。以下是我們使用 @pika/web 開發 pikapkg.com 的流程,我們也希望你們在 2019 年開發新的 Web App 時也可以使用這個流程。

對於新專案,可以拋棄打包器了。使用 JavaScript 模組語法來寫專案程式碼,使用 @pika/web 來安裝 npm 依賴項,不需要其他工具。

根據需要來新增其他工具。如果你需要型別系統,就加入 TypeScript。如果你想要使用實驗性的 JavaScript 特性,可以加入 Babel。如果你想最小化 JavaScript 程式碼,可以加入 Terser。

如果你覺得有必要,並且有時間,可以試著加入一個打包器,然後進行效能測試。頁面首次載入變快了嗎?如果是,那就釋出出去!

隨著專案的增長,持續優化你的打包器配置。

如果你的專案有足夠的預算,可以招一個 Webpack 專家。

示例專案

  • 一個簡單的專案:

https://glitch.com/edit/#!/pika-web-example-simple

  • 一個 Preact+HTM 專案:

https://glitch.com/edit/#!/pika-web-example-preact-htm

  • 一個 Electron 專案,使用了 Three.js:

https://github.com/br3tt/electron-three

  • 英文原文:

https://www.pikapkg.com/blog/pika-web-a-future-without-webpack

Facebook Profile photo
Written by Nat
This is the author box. A short description about the author of this article. Could be their website link, what they like to read about and so on. Profile