前言
用了兩年多 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，效能應該會更好，但得視需求而調整)
留言