将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中文网其他相关文章！