在 Next.js 音樂應用中使用動態 Preload 技術提升前端效能降低延遲
程式碼在這邊的 feature/preload 分支: https://github.com/sh1un/Nextjs-Musive-app 此專案是一個 Next.js 專案，原作者為 Ansh Rathod，我已經過作者本人授權使用，因此 Fork 過來稍微改了一下。 我本身不是一名專精於前端技術的開發者，所以我所修改的 Code 都是由 ChatGPT-4 產生的。我今天這樣做的主要目的是想實驗 preload 是否能做到效能優化，以此來做一個簡單的 PoC。 補充一下，這篇文章的內容本來是要放在 「2024 AWS Educate 陪跑計畫的獎勵課程 - 雲端串流挑戰：復刻 Spotify 的技術旅程」中教學，此工作坊旨在教學如何利用 CloudFront 優化速度與降低延遲，但礙於當天工作坊的內容太滿已經塞不下了，所以當天工作坊就沒有講到 Preload，如果看到這篇文章，想要學學 CloudFront 歡迎參觀我們當天的教材 (連結) 什麼是 Preload? Preload 是一種網頁性能優化技術，讓瀏覽器在頁面加載時預先加載指定的資源，這樣在使用這些資源時可以更快地顯示或播放。這可以減少等待時間，提升用戶體驗。 你可以想成：原本你是要“按下去播放按鈕”才會開始下載音樂，現在我們提前幫你下載，你之後“按下去播放按鈕”就會立即播放。 舉例 如果你在網頁上有一段影片或音樂，你可以用 preload 告訴瀏覽器提前下載這些文件，這樣當用戶點擊播放按鈕時，影片或音樂就會立即播放，而不是先等待下載。 基本用法： 在 HTML 中，你可以在 <link> 標籤中使用 rel="preload" 來預加載資源。例如： <link rel="preload" href="path/to/your/file.mp3" as="audio"> 這樣，瀏覽器會在頁面加載時預先下載 file.mp3，提高用戶播放音樂的速度。 動態 Preload 的實現思路 每個用戶的歌單都不一樣，所以我們當然不希望把 preload 的 href 寫死成一個 URL。 解決方案 我們可以通過以下幾個步驟來實現動態的 preload： API 獲取歌單： 伺服器端提供一個 API，根據用戶的請求返回該用戶的歌單。這個 API 返回一個 JSON 結構，其中包含了音樂檔案的 URL 列表。 JavaScript 動態生成 Preload 標籤： 使用 JavaScript 在頁面加載後動態地從 API 獲取歌單，並為每個音樂文件創建 preload 標籤，將其添加到頁面的 <head> 中。 具體實現 注意⚠️ 我的寫法並非添加 preload 到頁面的 <head>，而是直接用 React 和 JS 本身提供的內建物件來達到同樣效果，詳見本段說明。...