將CDN緩存添加到Vite構建中

利用內容交付網絡（CDN）可通過使靜態資產更接近用戶來大大提高網站性能。 CDN通過在全球分散的邊緣服務器上分配內容來實現這一目標。當用戶訪問您的網站時，CDN將請求引導到最近的服務器。如果資產已被緩存（來自以前的訪問或其他用戶），則可以立即提供。否則，CDN從您的原始服務器中獲取它，將其調整，然後將其提供。

本教程以AWS CloudFront為例，演示如何配置分發以服務JavaScript，CSS，字體文件和其他靜態資產，並將其與Vite Build Process集成。對於更強大的方法，請考慮使用基礎架構AS代碼工具（例如無服務器框架或AWS CDK）。但是，為簡單起見，我們將使用AWS控制台。

配置AWS CloudFront分發

1. 導航到AWS控制台中的CloudFront主頁。
2. 單擊“創建分配”按鈕。
3. 在創建屏幕中，指定原始域（您的資產所在的位置）。大多數默認設置都是合適的。
4. 至關重要的是，從“響應標頭策略”下拉列表中選擇“ cors-with-preflight”。
5. 單擊“創建分佈。”。然後，您的新發行版將出現。

將CloudFront與Vite集成

在設置CDN至關重要的同時，必須配置您的網站以從中檢索資產。在各種構建系統（WebPack，lollup等）中，此集成相似。

1. 在您的vite.config.ts文件中，確定構建是否用於生產：

 const Isproduction = process.env.node_env ===“生產”;

2. 配置Vite在生產中使用CDN：

導出默認decteConfig（{
  基礎：生產？ process.env.reaeact_cdn：“”，
}）;

請記住，將REACT_CDN環境變量設置為您的CloudFront Distribution的URL（例如， https://distributiondomainname.cloudfront.net ://distributiondomainname.cloudfront.net）。

VitePWA兼容性

如果使用VitePWA插件，請確保正確設置您的base屬性：

 vitepwa（{
  根據： ”/”，
}）;

錯誤的設置可能會導致web.manifest文件中的錯誤。

驗證CDN功能

設置後，檢查網絡請求您網站的資產。您應該觀察h2協議。檢查響應標題；您會發現與CloudFront相關的數據確認了CDN的參與。

與Vite的緩存破壞

Vite會自動處理通過指紋破壞的緩存。它添加了Hash代碼到資產文件名（例如home-abc123.js ）中。當資產更改時，哈希更改，迫使CDN獲取更新的版本。

擴展CDN緩存

CDN緩存益處範圍超出了JavaScript，CSS和字體。如果使用S3進行圖像存儲，請考慮為其配置雲優。這不僅提供了邊緣緩存，還可以啟用S3缺乏的HTTP/2支持。

高級CDN策略

該教程涵蓋了基本的CDN集成。為了獲得最佳性能，請考慮使用CDN服務整個站點，從而使其僅用於動態內容的Origin服務器。

結論

CDN是通過提供邊緣緩存和HTTP/2支持來增強網站性能的強大工具。本指南簡化了設置CDN並將其與Vite集成的過程，為您提供了寶貴的性能優化技術。

以上是將CDN緩存添加到Vite構建中的詳細內容。更多資訊請關注PHP中文網其他相關文章！