Adding CDN Caching to a Vite Build

Leveraging a Content Delivery Network (CDN) significantly enhances website performance by caching static assets closer to users. CDNs achieve this by distributing content across globally dispersed edge servers. When a user accesses your site, the CDN directs the request to the nearest server. If the asset is already cached (from a previous visit or another user), it's served instantly. Otherwise, the CDN fetches it from your origin server, caches it, and then delivers it.

This tutorial uses AWS CloudFront as an example, demonstrating how to configure a distribution to serve JavaScript, CSS, font files, and other static assets, and integrate it with a Vite build process. For a more robust approach, consider using infrastructure-as-code tools like the Serverless Framework or AWS CDK. However, for simplicity, we'll use the AWS console.

Configuring an AWS CloudFront Distribution

1. Navigate to the CloudFront homepage in the AWS console.
2. Click the "Create Distribution" button.
3. In the creation screen, specify the origin domain (where your assets reside). Most default settings are suitable.
4. Crucially, select "CORS-With-Preflight" from the "Response headers policy" dropdown.
5. Click "Create Distribution." Your new distribution will then appear.

Integrating CloudFront with Vite

While setting up the CDN is essential, your website must be configured to retrieve assets from it. This integration is similar across various build systems (Webpack, Rollup, etc.).

1. In your vite.config.ts file, determine if the build is for production:

const isProduction = process.env.NODE_ENV === "production";

2. Configure Vite to use the CDN in production:

export default defineConfig({
  base: isProduction ? process.env.REACT_CDN : "",
});

Remember to set the REACT_CDN environment variable to your CloudFront distribution's URL (e.g., https://distributiondomainname.cloudfront.net).

VitePWA Compatibility

If using the VitePWA plugin, ensure your base property is correctly set:

VitePWA({
  base: "/",
});

Incorrect settings can lead to errors in your web.manifest file.

Verifying CDN Functionality

After setup, inspect network requests for your site's assets. You should observe the h2 protocol. Examine the response headers; you'll find CloudFront-related data confirming the CDN's involvement.

Cache Busting with Vite

Vite automatically handles cache busting through fingerprinting. It adds hash codes to asset filenames (e.g., home-abc123.js). When assets change, the hash changes, forcing the CDN to fetch the updated version.

Extending CDN Caching

CDN caching benefits extend beyond JavaScript, CSS, and fonts. If using S3 for image storage, consider configuring a CloudFront distribution for it. This not only provides edge caching but also enables HTTP/2 support, which S3 lacks.

Advanced CDN Strategies

This tutorial covers basic CDN integration. For optimal performance, consider serving your entire site from the CDN, allowing it to interact with your origin server only for dynamic content.

Conclusion

CDNs are a powerful tool for enhancing website performance by providing edge caching and HTTP/2 support. This guide simplifies the process of setting up a CDN and integrating it with Vite, equipping you with a valuable performance optimization technique.

The above is the detailed content of Adding CDN Caching to a Vite Build. For more information, please follow other related articles on the PHP Chinese website!