利用內容交付網絡(CDN)可通過使靜態資產更接近用戶來大大提高網站性能。 CDN通過在全球分散的邊緣服務器上分配內容來實現這一目標。當用戶訪問您的網站時,CDN將請求引導到最近的服務器。如果資產已被緩存(來自以前的訪問或其他用戶),則可以立即提供。否則,CDN從您的原始服務器中獲取它,將其調整,然後將其提供。
本教程以AWS CloudFront為例,演示如何配置分發以服務JavaScript,CSS,字體文件和其他靜態資產,並將其與Vite Build Process集成。對於更強大的方法,請考慮使用基礎架構AS代碼工具(例如無服務器框架或AWS CDK)。但是,為簡單起見,我們將使用AWS控制台。
在設置CDN至關重要的同時,必須配置您的網站以從中檢索資產。在各種構建系統(WebPack,lollup等)中,此集成相似。
vite.config.ts
文件中,確定構建是否用於生產:const Isproduction = process.env.node_env ===“生產”;
導出默認decteConfig({ 基礎:生產? process.env.reaeact_cdn:“”, });
請記住,將REACT_CDN
環境變量設置為您的CloudFront Distribution的URL(例如, https://distributiondomainname.cloudfront.net
://distributiondomainname.cloudfront.net)。
如果使用VitePWA插件,請確保正確設置您的base
屬性:
vitepwa({ 根據: ”/”, });
錯誤的設置可能會導致web.manifest
文件中的錯誤。
設置後,檢查網絡請求您網站的資產。您應該觀察h2
協議。檢查響應標題;您會發現與CloudFront相關的數據確認了CDN的參與。
Vite會自動處理通過指紋破壞的緩存。它添加了Hash代碼到資產文件名(例如home-abc123.js
)中。當資產更改時,哈希更改,迫使CDN獲取更新的版本。
CDN緩存益處範圍超出了JavaScript,CSS和字體。如果使用S3進行圖像存儲,請考慮為其配置雲優。這不僅提供了邊緣緩存,還可以啟用S3缺乏的HTTP/2支持。
該教程涵蓋了基本的CDN集成。為了獲得最佳性能,請考慮使用CDN服務整個站點,從而使其僅用於動態內容的Origin服務器。
CDN是通過提供邊緣緩存和HTTP/2支持來增強網站性能的強大工具。本指南簡化了設置CDN並將其與Vite集成的過程,為您提供了寶貴的性能優化技術。
以上是將CDN緩存添加到Vite構建中的詳細內容。更多資訊請關注PHP中文網其他相關文章!