一個企業網站到底需要多少 JavaScript

做企業形象網站的時候，一個很值得先問的問題是：這個網站真正需要「互動」的地方有幾個？

答案通常是三個以內：導覽選單、捲動進場、還有一兩個展開收合。

其他部分基本上是文字、圖片與連結。

那為什麼還要用框架

因為維護。同一份導覽列要出現在八個頁面上，用元件寫一次比複製八次好；SEO 的 metadata 要跟著頁面走，用框架處理比手動維護八份 HTML 好。

框架的價值在於開發與維護方式，不在於執行時要送多少 JavaScript 到瀏覽器。這兩件事其實可以分開。

靜態產生 + 少量 hydration

比較舒服的組合是：

• 頁面在建置階段就產生好 HTML，訪客第一次連進來拿到的就是完整內容
• 需要互動的元件才在瀏覽器端接手
• 純展示的區塊不需要任何 JavaScript

這樣做的好處很直接：第一次載入快、SEO 沒有問題、即使 JavaScript 載入失敗，內容仍然看得到。

動畫的部分

大部分進場動畫都可以用 CSS 完成：

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .85s, transform .85s;
  }
}

JavaScript 只需要負責一件事：判斷元素進到畫面了沒有。一個 IntersectionObserver 就夠了，不需要動畫函式庫。

真正需要引入動畫套件的情況是時間軸控制、複雜的序列或是與捲動位置綁定的連續動畫。如果只是淡入，那大概是殺雞用牛刀。

一個判斷標準

在加入任何函式庫之前，可以先問：

1. 這個功能沒有它做不到嗎？
2. 它會增加多少載入量？
3. 三年後還會有人維護它嗎？

三題裡面有兩題答不出來，通常就不該加。

這不是效能潔癖

網站慢一點，多數訪客不會抱怨，他們只會離開，而你不會知道。

而且載入量這件事有個特性：它只會往上長，不會自己變少。每個「先加進來再說」的套件，最後都會變成沒有人敢刪的東西。所以在一開始少加一點，會比之後再來瘦身容易很多。