前端開發時的 JavaScript 的成本考量

2023年12月30日

💎 加入 E+ 成長計畫 與超過 250+ 位軟體工程師一起在社群中成長,並且獲得更深入、系統性軟體工程內容

本篇最早收錄於《ExplainThis 全端雙週報》第 7 期

JavaScript 是讓網頁應用程式能夠具有互動性的程式語言,也是前端工程不可或缺的一環,然而過多的 JavaScript 是有成本的。 《The Cost of JavaScript》是前端界很經典的一個演講,講者 Addy Osmani 上個月分享了 2023 年版本的內容。

在談論 JavaScript 前,有個重要的概念需要放在腦中,那就是硬體與網路速度對網頁的影響很大;而在這世界上,多數人仍是使用中低階的裝置,因此同樣的程式在你開發的環境可能跑很快,但這不代表對那些用比較低階裝置的使用者是同樣的速度。這也是為什麼我們要在乎 JavaScript 成本,因為越大包的 JavaScript,載入與執行越慢,在中低階裝置上會特別有感。

從 JavaScript 的角度來看,平常我們在執行 npm install 時,每多裝一個套件,就是多一個成本。要降低成本的一個方式,是拆分程式碼 (code splitting),把打包出的 JavaScript 拆成多個模組,然後只在需要時加載該模組,這樣可以避免在最開始加載一個大的模組導致時間變長。

近幾年為了加快網頁應用的加載,前端業界開始回歸伺服器端渲染 (SSR),在伺服器端渲染好 HTML,傳送到客戶端後才加上事件處理器 (又稱為注水 hydration),這個概念進一步延伸出島嶼架構 (Islands Architecture) 與漸進式注水 (Progressive Hydration),等減少在最開始一次注水,進而提升速度。同時也有 Qwik 框架提出的 Resumability 概念,只在需要的時候創建事件處理器,確保最少量的 JavaScript。

另外也有許多框架開始推出了「零 JavaScript」的概念,其中包含 React 的 Server Components (RSC),完全在伺服器端渲染好元件,然後透過串流的方式傳到客戶端,大幅加速了最開始的加載速度。

總結來說,在 2023 年的前端,有非常多過去沒有的創新,能夠協助我們更有效的控管過量的 JavaScript。在演講的最後,Addy Osmani 重述不要把高階裝置與高速網路,視為理所當然;在開發時用中低階的裝置與一般的網速,會更貼近真實的使用狀況。同時他建議每個前端團隊,都要為效能設定目標,並且花時間與精力來確保不會超出設定的目標。

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們