前言

用了兩年多 Next.JS 框架，本身針對JS建構或圖像本身就做了最佳化，就順手整理了一下，我們做過了那些優化。

1.圖片最佳化

• Next.JS 本身就做了很多的圖片優化，如: 懶加載、透過 Image loader 最佳化圖片(縮圖、格式轉換、品質壓縮)、並依據使用者的解析度給予不同的圖片尺寸，正確的使用 next/image 元件載入圖片，就可以輕易達到圖片的最佳化。
• 把圖片放在 CDN，並將Next js loader 移到第三方圖片的Loader

2.減少 JS 大小，讓其 bundle size 更小

• Next.JS 本身就會做程式碼拆包(Code spliting)，在共用_app.tsx元件或 layout 用到的JS 都會被包到主要的 JS 裡，將其拆到子頁面去，這樣就不會包在主要 JS 裡。
• 頁面只顯示頁面需要的元件，頁面用不到的元件，採用動態載入元件 ( Dynamic import )，這樣元件就不會打包到主要 JS 裡。

import dynamic from 'next/dynamic';
const CartView = dynamic(() => import('./cartView'));

• 伺服器渲染時只拿回需要的資料，不需要的資料就不要吐到用戶端。
• 透過 next/bundle-analyzer 分析工具得知道，那些套件過大，並找到替代的替換 如: Moment.js to Days.js 。
• 改變套件的引入方式，也會影響JS的打包的大小。 如:lodash

import { throttle } from 'lodash/throttle'; // good
import { throttle } from 'lodash'; // bad

• 畫面不需要載入的JS 或 CSS，按需求載入，避免首次渲染阻塞。如: 購物車的側邊欄。

3. 減少 CSS 大小 。

• 不是每頁需要的共用 CSS，拆到各別頁面或元件去，並移除沒用到的 CSS 。
• 替換肥大的css 框架，如:Bootstrap 。

4. 透過 Jenkins 將把一些靜態檔案搬到 CDN ，CDN 可減少對主伺服器的IO負載，並在CDN 開啟 Clinet side cache。

5. 減少在頁面渲染時網站偏移或抖動，這會被Google 扣分。

6. 字體套用swap ，字體在在沒載入前，會先顯示預設字體。

7. 盤點及移除用不到的第三方JS，可以在網頁互動載入的JS，就延後載入，可避免在第一次渲染時載入過多的JS，而造主線程阻塞。

  <Script
   src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"
   strategy="afterInteractive"
  ></Script>

(其實改成捲動後載入JS，效能應該會更好，但得視需求而調整)

8. 調整網站傳輸傳輸及編碼協定 (boti)、並開啟 Http/2 及 Http/3 通訊協定效率，網站在傳輸可以更快及壓縮效率更高。

9. 減少 Request 及 API Request 縮減回傳到用戶端的資料內容，把後端不常變動的資料，又常查詢的資料 Cache 起來。

10. 伺服器渲染，會需要很多的效能，可以針對頁面渲染部份，能採用 SSG 或 ISR 就用 SSG 或 ISR，不需要預渲染的頁面的，可以走用戶端 CSR 渲染，並減少在渲染時，資料改向Redis 要，讀取Redis 決對會比 API 來的快。

11. 使用LTM 及多幾台機器及應用程式分散負載。

12. 網站昇級App routing ，並使用 server side component ，可以讓不需要和使用者互動的元件，在打包時 JS 更小。

13. 定期將 Next.JS 框架昇級，每次的官方都宣稱昇級都有對效能的改善，每次昇級雖然有一些小痛，但如果長時間不昇級，就會變得很難昇級。