内容交付网络，或称CDN，允许你改善你的网站静态资源的交付，最明显的是，通过CDN缓存。它们通过从位于世界各地的边缘位置为你的内容提供服务来做到这一点。当用户浏览你的网站，而你的网站从CDN请求资源时，CDN将把该请求发送到最近的边缘位置。如果该位置有请求的资源，无论是从该用户先前的访问，还是从其他人那里，那么内容将从缓存中提供。如果没有，CDN将从你的底层域请求内容，进行缓存并提供服务。
外面有无数的CDN，但在这篇文章中，我们将使用AWS CloudFront。我们将看看如何设置一个CloudFront分布，以服务我们网站的所有资产。JavaScript文件、CSS文件、字体文件，等等。然后，我们将了解如何将其集成到Vite构建中。如果你想了解更多关于Vite的信息，我在这里有一个介绍。
设置CloudFront CDN分发
让我们直接进入并设置我们的CloudFront CDN分布。
对于任何严肃的项目来说，你应该使用无服务器框架（ServerlessFramework）或AWS的CDK等工具，用代码来设置你的无服务器基础设施。但为了简单起见，在这里，我们将使用AWS控制台设置我们的CDN。
前往CloudFront的主页。在右上方，你应该看到一个橙色的按钮来创建一个新的分发。
创建屏幕有大量的选项，但在大多数情况下，默认的选择就可以了。首先，也是最重要的，添加你的资源所在的域。
接下来，向下滚动并找到响应头策略的下拉菜单，并选择 "CORS-With-Prelight"。
最后，点击底部的创建分发按钮，希望你会看到你的新分发。
将CDN与Vite整合
我们的CDN设置好并准备好为我们的文件服务是一回事。但是，我们的网站实际上知道 如何从我们的CDN请求文件是另一回事。我将介绍与Vite的集成，但其他构建系统，如webpack或Rollup，将是类似的。
当Vite构建我们的网站时，它维护着我们网站各部分导入的所有JavaScript和CSS文件的 "图表"，并注入适当的<script> 标签、<link> 标签或import() 语句来加载需要的东西。我们需要做的是告诉Vite在生产时从我们的CDN请求这些资产。让我们看看怎么做。
打开你的vite.config.ts 文件。首先，我们需要知道我们是在现场（production）还是在开发（dev）。
const isProduction = process.env.NODE_ENV === "production";
这样做是因为Vite在我们运行vite build 的时候会设置这个环境变量，这也是我们在生产中所做的，而不是在开发模式下的热模块重载。
接下来，我们告诉Vite从我们的CDN提取我们的资产，就像这样，设置我们配置对象的base 属性。
export default defineConfig({
base: isProduction ? process.env.REACT_CDN : "",
请确保将你的REACT_CDN 环境变量设置为你的CDN的位置，在这种情况下，这将是我们的CloudFront分布的位置。我的环境变量看起来像这样（但不完全是）。
https://distributiondomainname.cloudfront.net
注意你的VitePWA设置!
作为最后一项清理工作，如果你碰巧使用VitePWA插件，请确保像这样重置你的base 属性。
VitePWA({
base: "/",
否则，你的web.manifest 文件将有无效的设置并导致错误。
让我们看看CDN的工作
一旦你都设置好了，浏览你的网站，并检查你的脚本或CSS文件的任何网络请求。对于初学者来说，协议应该是h2。
从那里，你可以偷看其中任何一个文件的响应头，你应该在那里看到一些CloudFront的数据。
破坏缓存
谈论CDN时很难不提及缓存破坏。像CloudFront这样的CDN有从缓存中手动 "弹出 "项目的功能。但对于Vite构建的资产，我们可以 "免费 "获得这个功能，因为Vite在其生成的资产的文件名中添加了指纹或哈希代码。
所以Vite在构建过程中可能会把一个home.js 的文件变成home-abc123.js ，但如果你改变了这个文件并重新构建，它可能会变成home-xyz987.js 。这很好，因为这将 "破坏缓存"，新构建的文件将不会被缓存，所以CDN将不得不转向我们的主机域来获取实际内容。
其他静态资产的CDN缓存
JavaScript、CSS和字体文件并不是唯一可以从CDN缓存中获益的资产。如果你有一个S3桶，你正在为图片提供服务，也可以考虑为它设置一个CloudFront分布。有专门针对S3的选项，这使得它的创建很容易。你不仅可以得到同样的边缘缓存，还可以得到HTTP/2响应，这是S3所不提供的。
先进的CDN实践
在这里整合CDN是相当直接的，但我们只享受到潜在好处的一小部分。现在，用户将浏览我们的应用程序，我们的服务器将提供我们的根HTML文件，然后用户的浏览器将连接到我们的CDN，开始拉下我们所有的静态资产。
进一步说，我们希望从CDN提供我们的整个网站。这样，它就可以根据需要与我们的网络服务器沟通，以获得非静态和非缓存资产。
总结
CDN是提高网站性能的一个好方法。它们提供了边缘缓存和HTTP/2，开箱即用。不仅如此，它们还相当容易设置。现在你有了一个新的工具，可以设置CDN并将其与Vite整合。
