Nextjs 和内容交付网络 (CDN)：优化静态资产以加快加载时间

构建现代web应用程序时，性能是最重要的。一个快速，响应迅速的网站不仅提供了更好的用户体验，而且还提供了更好的 seo排名和更高的转换率>。 >提高性能的最有效方法之一，尤其是使用图像，javascript和css文件之类的静态资产时，是使用

>。 在此博客文章中，我们将探讨如何使用next.js 来利用cdn来优化静态资产并大大改善您的web应用程序的负载时间。

a内容交付网络（cdn）

>

> 为什么要与next.js一起使用cdn？ next.js以其功能强大的功能而闻名，例如服务器端渲染（ssr）

静态站点生成（ssg）

>增量静态静态再生（isr）

这是cdn发挥作用的地方。以下是将cdn与next.js一起使用的一些关键原因。 更快的加载时间：通过缓存资产靠近用户，cdn减少了加载静态资产所需的时间。

>减少服务器加载

1. 改进的全球性能：有了cdn，世界各地的用户都可以以闪电般的速度访问您的网站，无论其位置如何
2. 更好的缓存：cdns有效地缓存并提供静态资产，改善了可重复性并降低了冗余。
>让我们深入了解如何使用next.js实施cdn，以充分利用这些好处。
3. > 步骤1：了解next.js静态文件服务
next.js提供内置支持，用于在 /公共目录中使用静态文件。此目录中的文件将在您的应用程序的根源上自动提供。
4. > 例如，如果您在内部/public/images/内放置图像文件徽标。

   /my-next-app
   ├── /public
   │   └── /images
   │       └── logo.png
   

   登录后复制
默认情况下，next.js直接从托管应用程序的服务器直接从该目录中提供文件。但是，使用cdn可以极大地改善这些文件的服务方式。

有几种配置next.js使用cdn用于服务静态资产的方法。最简单的方法是在下一步。

> vercel
>，则会自动获得cdn的好处。 vercel提供边缘缓存，在其中静态资产被缓存并从最近的vercel边缘网络服务器提供。 默认情况下，当您将应用程序部署到vercel时，所有资产（包括图像，css和javascript文件）将通过cdn自动提供。您无需为此做任何额外的事情。

示例：使用next.js的自定义cdn

cloudflare

aws cloudfront 或快速

这是一个如何做到这一点的示例：

// next.config.js

module.exports = {
  assetprefix: 'https://cdn.example.com',
  images: {
    loader: 'imgix',  // you can use other image loaders like cloudinary
    path: 'https://cdn.example.com',
  },
};

assetprefix：此配置告诉next.js在哪里寻找静态资产，在这种情况下，指向cdn域（

）

imgix ， cloudinary ，或> akamai，取决于cdn provider。

步骤3：使用next.js和cdn优化图像加载

组件，您可以确保以现代格式（例如webp）提供图像并在即时进行优化。>

>
• 这是如何使用下一个/图像组件的示例 https://cdn.example.com).

  import image from 'next/image'
  
  function home() {
    return (
      <div>
        <h1>welcome to my website</h1>
        <image
          src="https://cdn.example.com/images/logo.png" // url from cdn
          alt="logo"
          width={500}
          height={500}
          quality={75}  // controls image quality for optimization
        />
      </div>
    )
  }
  

  登录后复制
  next.js通过调整大小，提供响应式图像并应用webp（例如webp）以及cdn缓存这些优化的图像以使其更快地交付的现代格式来优化图像。
好处：
• >自动图像调整大小：图像自动为用户的设备提供正确的尺寸，减少了不必要的图像下载。
> webp支持

>

---

步骤4：缓存控制和长期缓存

为了进一步提高性能，您可以利用缓存策略。静态资产（如图像和javascript文件）不会经常更改，因此您可以将其配置为长期缓存。

> 示例：设置静态资产的缓存控制标头

通过cdn提供资产时，设置适当的缓存标题很重要。这允许cdn缓存资产并将其快速交付给用户，而无需从origin server索取它们。

。 例如，您可以为图像设置以下高速缓存控制标头：>

Cache-Control: public, max-age=31536000, immutable

登录后复制

公共：资产可以由浏览器和cdn。

max-age = 31536000：资产可以缓存一年（以秒为单位）。

不变的：资产不会改变，因此浏览器和cdn可以无限期地缓存。

>

大多数cdn（例如cloudflare或aws cloudfront）允许您通过其设置配置这些缓存标题。
• > 步骤5：部署和测试
• >设置cdn并优化您的资产后，您可以将您的下一个应用程序部署到生产中。如果您使用的是> vercel，则将自动集成cdn。如果您使用的是自定义cdn，请确保assetprefix和缓存配置正确。
>

>部署后，您可以使用>，等工具来测试应用程序的性能，或cdn到位。

最后的想法

>使用a

使用next.js的内容交付网络（cdn）

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

是提高web应用程序性能的有力方法，尤其是在提供静态资产（例如图像，javascript和css）时。通过减少延迟，卸载服务器负载和利用高级的缓存策略，cdn可确保您的应用程序可以快速有效地加载到全世界的用户。

>
关键要点：

next.js通过在您的配置中设置assetprefix来简单地与cdn集成。
内置
• next/image
• 组件允许与cdn配对时自动优化。
通过减少延迟，缓存内容和卸载服务器流量来提高cdn的性能。

>使用适当的缓存控制策略利用缓存策略

标题，以确保静态资产的长期缓存。

---

>现在您已经学会了如何将cdn集成到您的下一个应用程序中，请继续并优化应用程序的性能，以获得更快，更好的用户体验！

>

以上就是Nextjs 和内容交付网络 (CDN)：优化静态资产以加快加载时间的详细内容，更多请关注php中文网其它相关文章！