如何以閃電般的速度加載網(wǎng)站？

看看這 8 個提升前端性能的技巧：

1.壓縮

在傳輸之前壓縮文件可以減少其大小，減少需要傳輸?shù)臄?shù)據(jù)量，從而加快加載時間。

實現(xiàn)方法：

• Gzip/Brotli 壓縮: 配置你的 web 服務器（例如 Apache、Nginx）使用 Gzip 或 Brotli 壓縮文本資源如 HTML、CSS 和 JavaScript。
• 圖片壓縮: 使用 TinyPNG 或 ImageOptim 等工具壓縮圖片。
• 壓縮庫: 對于動態(tài)生成的內(nèi)容，在發(fā)送到客戶端之前使用后端框架中的庫進行壓縮。

2.選擇性渲染/窗口化

僅渲染用戶可見的元素以減少瀏覽器的工作負載并提高渲染性能。例如，在動態(tài)列表中，只顯示可見項。

實現(xiàn)方法：

• 虛擬滾動: 對于長列表，實現(xiàn)虛擬滾動，只渲染可見部分的列表（例如使用 React Virtualized 或 Angular CDK 庫）。
• 延遲加載: 僅在圖片和其他資源即將進入視圖時加載它們。

3.代碼分割模塊化架構

將較大的應用程序包拆分成多個更小、更易管理的塊，可以獨立加載，減少初始加載時間。

實現(xiàn)方法：

• Webpack 代碼分割: 使用 Webpack 的代碼分割功能，將代碼拆分成可按需加載的更小的包。
• 動態(tài)導入: 使用動態(tài) import() 語句按需加載模塊，而不是一次性加載所有內(nèi)容。

4.基于優(yōu)先級的加載

優(yōu)先加載重要資源和出現(xiàn)在視口（或首屏）的內(nèi)容，確保更好的用戶體驗。

實現(xiàn)方法：

• 關鍵 CSS: 內(nèi)聯(lián)渲染首屏內(nèi)容所需的關鍵 CSS，并推遲加載非關鍵 CSS。
• 資源提示: 使用下面代碼優(yōu)先加載重要資源。

<link rel="preload">

5.預加載

在請求資源之前提前獲取資源，以提高加載速度。

實現(xiàn)方法：

• 預加載關鍵資源: 使用下面代碼預加載重要資源，如字體、腳本或圖片，這些資源在頁面初始加載后立即需要。

<link rel="preload">

• 預連接: 使用下面代碼提前建立到所需源的連接。

<link rel="preconnect">

6.Tree Shaking 或刪除死代碼

從最終的 JavaScript 包中刪除未使用的代碼，減少整體包的大小，從而加快下載和執(zhí)行時間。

實現(xiàn)方法：

• Webpack Tree Shaking: 確保 Webpack 配置了 Tree Shaking，通過使用 ES6 模塊并將 mode 設置為 production。
• 死代碼消除: 使用 Terser 等工具在縮小過程中消除死代碼。

7.預先抓取

主動獲取或緩存可能很快需要的資源，確保在請求這些資源時它們已經(jīng)可用，減少等待時間。

實現(xiàn)方法：

• 鏈接預取: 使用下面代碼預取可能在不久的將來需要的資源（例如用戶可能導航到的下一頁）。

<link rel="prefetch">

• Service Workers: 實現(xiàn) service workers 緩存資源以供離線使用，并在后臺預取內(nèi)容。

8.動態(tài)導入

根據(jù)用戶操作動態(tài)加載代碼模塊，通過推遲加載非必要代碼來優(yōu)化初始加載時間。

實現(xiàn)方法：

• JavaScript 中的動態(tài)導入: 使用 import() 函數(shù)在需要時動態(tài)加載模塊。例如：

import('./module').then(...)）

• 延遲加載路由: 在 React 等框架中，使用 React.lazy 和 Suspense 根據(jù)用戶交互延遲加載組件。