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

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《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支持

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