dedecms 网站名称标签建设品牌网站

静态资源处理：图片、字体和其他文件

作者：码力无边

---

一个现代化的网站远不止代码和文本。图片、图标、字体和各种媒体文件共同构成了丰富的用户体验。然而，这些资源，尤其是图片，也常常是导致网站加载缓慢的罪魁祸首。

幸运的是，Next.js 不仅提供了一种简单的方式来管理这些静态资源，还内置了一套世界级的优化系统，可以自动将你的网站性能提升到一个新的水平。今天，我们就来深入了解如何在 Next.js 中优雅且高效地处理静态资源。

基础：public 文件夹

处理静态资源，首先要了解将它们放在哪里。Next.js 约定了一个名为 public 的特殊文件夹，它位于项目的根目录。

public 文件夹的特点：

• 根目录映射：该文件夹下的所有内容都会被 Next.js 视为可以从应用的根 URL (/) 开始直接访问。
• 无需构建处理：与 pages 或 components 目录下的代码不同，public 文件夹里的文件不会经过 Webpack 的处理，它们会被原封不动地复制到最终的构建产物中。

使用示例：
如果你在 public 文件夹下放置一张图片 logo.png，那么你可以通过 /logo.png 这个 URL 来访问它。

文件结构:

my-next-app/
├── public/
│   ├── logo.png
│   ├── favicon.ico
│   └── robots.txt
├── pages/
└── ...

在代码中引用:

function Header() {return (<header>{/* 注意 src 的路径是从根目录开始的 */}<img src="/logo.png" alt="My App Logo" width={150} /></header>);
}

public 文件夹适合存放什么？

• 网站图标 (favicon.ico)
• robots.txt 文件
• 品牌 Logo 或不会改变的全局图片
• 可下载的 PDF 或其他文件

游戏规则改变者：next/image 组件

现在，让我们进入今天最核心、最激动人心的部分。虽然你可以像上面那样使用标准的 <img> 标签，但 Next.js 强烈建议你不要这样做。取而代之，你应该使用它提供的 <Image> 组件。

为什么？因为一个普通的 <img> 标签会给你的网站带来一系列性能问题：

1. 巨大的文件体积：你可能会无意中向移动端用户发送一张 4K 分辨率的超大图片，浪费带宽，拖慢加载。
2. 过时的图片格式：你可能还在使用 JPG 或 PNG，而现代浏览器已经支持像 WebP 或 AVIF 这样压缩率更高、体积更小的格式。
3. 布局偏移 (Layout Shift)：浏览器在加载图片之前不知道它的尺寸，导致图片加载完成后页面内容突然“跳动”，严重影响用户体验，这也是谷歌 Core Web Vitals 的一项重要指标。

next/image 组件通过一系列自动化优化，完美地解决了上述所有问题。

<Image> 组件的核心优势

1. 自动调整尺寸：Next.js 会根据设备屏幕大小，自动为图片生成多个优化过的尺寸，并提供最合适的一个给用户。
2. 自动格式优化：它会检测浏览器是否支持 WebP 等现代格式，如果支持，就自动提供 WebP 版本的图片，如果不支持，则优雅降级为原始格式。
3. 防止布局偏移：通过要求你提供 width 和 height 属性，<Image> 组件可以在图片加载前就为它预留好空间，从而消除页面跳动。
4. 默认懒加载 (Lazy Loading)：只有当图片滚动到用户视口附近时，它才会被加载。这极大地加快了页面的初始加载速度。

如何使用 next/image

首先，从 next/image 导入组件。

有两种主要的 src 提供方式：

1. 静态导入（推荐）

这是最简单也是最推荐的方式。你可以像导入一个模块一样导入图片文件。Next.js 会在构建时分析这张图片，并自动获取它的 width 和 height。

文件结构:

my-next-app/
├── public/
│   └── hero-banner.jpg
├── pages/
│   └── index.tsx
└── ...

pages/index.tsx

import Image from 'next/image';
// 静态导入图片
import heroBanner from '../public/hero-banner.jpg';export default function HomePage() {return (<div><h1>探索新世界</h1><Imagesrc={heroBanner}alt="A beautiful landscape"// width 和 height 会被自动填充，但为了清晰和类型安全，最好还是写上// 你也可以添加 placeholder="blur" 来获得一个模糊的占位效果placeholder="blur"/></div>);
}

2. 字符串路径

如果你的图片 URL 是动态的（例如来自 CMS 或 API），你可以直接提供一个字符串路径。但这种情况下，你必须手动提供 width 和 height。

import Image from 'next/image';export default function Article({ post }) {return (<div><h1>{post.title}</h1><Imagesrc={post.imageUrl} // 来自外部 API 的 URLalt={post.title}width={800} // 必须提供height={600} // 必须提供/></div>);
}

关键属性 (Props)

• priority: 对于首屏（above-the-fold）的关键图片（如首页的 Banner），你应该添加 priority 属性。这会告诉 Next.js 禁用懒加载并优先加载这张图片。
• fill: 用于图片需要填充父元素的情况。使用它时，父元素需要设置 position: relative。这对于创建响应式背景图非常有用。
• sizes: 这是一个非常强大的属性，用于更精细地控制响应式图片。你可以告诉浏览器在不同的屏幕宽度下，图片预期会占据多大的宽度，从而帮助 Next.js 选择最合适的图片版本。

<div style={{ position: 'relative', width: '100%', height: '300px' }}><Imagesrc="/background.jpg"alt="Background"fillstyle={{ objectFit: 'cover' }} // 配合 CSS object-fitsizes="(max-width: 768px) 100vw, 50vw"/>
</div>

处理其他资源，如 SVG

SVG 是一种矢量格式，非常适合用作图标。在 Next.js 中，你可以用两种方式使用它：

1. 作为图片源：像普通图片一样使用 <Image> 组件。

   <Image src="/my-icon.svg" alt="icon" width={24} height={24} />
   

2. 作为 React 组件：这是一种更灵活的方式，允许你通过 CSS 或 props 来控制 SVG 的颜色、大小等。create-next-app 默认集成了 SVGR 工具来支持这种用法。

   // 像导入组件一样导入 SVG
   import MyIcon from '../public/my-icon.svg';function MyComponent() {// MyIcon 现在是一个 React 组件return <MyIcon style={{ color: 'blue', width: '30px' }} />;
   }
   

总结与最佳实践

1. 始终优先使用 <Image> 组件 而不是 <img> 标签来处理图片。它带来的性能提升是免费且巨大的。
2. 将全局、不常变动的资源（如 favicon, robots.txt）放在 public 文件夹中。
3. 对于组件内部使用的图片，优先使用静态导入，让 Next.js 自动为你处理尺寸信息。
4. 对于首屏关键图片，务必添加 priority 属性。
5. 对于需要填充容器的响应式图片，探索 fill 和 sizes 属性的强大功能。

正确管理和优化静态资源是前端性能优化的核心环节。Next.js 通过 public 文件夹和革命性的 <Image> 组件，将这个复杂的过程变得异常简单。

现在，我们的应用不仅结构良好、导航顺畅、样式精美，还拥有了极致的加载性能。在下一篇文章中，我们将学习如何构建可复用的布局（Layouts），以保持页面之间 UI 的一致性，并进一步简化我们的代码。敬请期待！