【前端面试】挖掘做过的nextJS项目（中）

https://blog.csdn.net/weixin_43342290/article/details/141170360?spm=1001.2014.3001.5501文章浏览阅读105次。需求:快速搭建宣传官网1.适应pc、移动端2.基本的路由跳转3.页面渲染优化4.宣传的图片、视频资源的加载优化5.seo优化全栈react web应用、tailwind css原子工具的支持，方便书写响应式uiapp router(React 服务器组件)支持服务器渲染优化、code-spilit优化服务端渲染对seo友好。https://blog.csdn.net/weixin_43342290/article/details/141170360?spm=1001.2014.3001.5501

图片优化

图片占典型网站页面重量的很大一部分，并且可以对网站的 LCP 性能产生相当大的影响。

Next.js 图片组件扩展了 HTML <img> 元素，具有自动图片优化功能：

尺寸优化：使用 WebP 和 AVIF 等现代图片格式自动为每个设备提供正确尺寸的图片。
视觉稳定性：加载图片时自动阻止布局转变。
更快的页面加载：仅当图片使用原生浏览器延迟加载进入视口时才会加载图片，并带有可选的模糊占位符。
资源灵活性：按需调整图片大小，即使是存储在远程服务器上的图片

🎥 监视：了解有关如何使用 next/image → YouTube（9 分钟）的更多信息。

import Image from 'next/image'
import profilePic from './me.png'

export default function Page() {
  return (
    

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/responsive-image.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/fill-container.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/background-image.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

window.devicePixelRatio

`window.devicePixelRatio` 是一个 Web API 属性，它返回一个数值，表示屏幕的物理像素和 CSS 像素之间的比例。这个属性对于处理视网膜（Retina）显示屏和其他高 DPI（Dots Per Inch）设备非常有用，因为它可以帮助开发者了解物理像素与 CSS 像素的实际映射关系。

以下是 `window.devicePixelRatio` 的一些关键点：

1. **定义**：`devicePixelRatio` 是 `window` 对象的一个只读属性，返回一个无符号的浮点数。

2. **用途**：主要用于响应式设计和高性能图形渲染，确保在高分辨率屏幕上提供清晰的图像和布局。

3. **默认值**：在标准显示屏上，`devicePixelRatio` 的值通常是 1。这意味着每个 CSS 像素对应一个物理像素。

4. **高分辨率屏幕**：在高分辨率屏幕上，比如苹果的视网膜显示屏，`devicePixelRatio` 的值可能是 2 或更高，这意味着每个 CSS 像素可能对应多个物理像素。

5. **使用示例**：
```javascript
var ratio = window.devicePixelRatio;
console.log("设备像素比: " + ratio);
```

6. **应用场景**：
- 根据 `devicePixelRatio` 动态调整图像大小，确保在高分辨率屏幕上图像不会模糊。
- 调整 canvas 元素的大小，以利用额外的像素提高图形的清晰度。
- 为不同的设备像素比提供不同的 CSS 样式或媒体查询。

7. **兼容性**：大多数现代浏览器都支持 `window.devicePixelRatio` 属性。

8. **注意事项**：虽然 `devicePixelRatio` 提供了设备像素比的信息，但它并不总是等于屏幕的 DPI。有些设备可能有其他方式来表示或处理像素比，因此在使用时需要考虑不同设备的特定行为。

通过使用 `window.devicePixelRatio`，开发者可以创建更加灵活和适应不同设备显示特性的 Web 应用。

    const dpr = window.devicePixelRatio || 1;
    let dprAdjustedWidth: number | undefined = undefined;
    if (width) {
      dprAdjustedWidth = Math.round(width * dpr * 100000) / 100000;
    }
    let dprAdjustedHeight: number | undefined = undefined;
    if (height) {
      dprAdjustedHeight = Math.round(height * dpr * 100000) / 100000;
    }

视频优化

要继续了解有关视频优化和最佳实践的更多信息，请参阅以下资源：

了解视频格式和编解码器：根据你的视频需求选择正确的格式和编解码器，例如用于兼容性的 MP4 或用于网络优化的 WebM。详细信息请参见 Mozilla 的视频编解码器指南。
视频压缩：使用 FFmpeg 等工具有效压缩视频，平衡质量与文件大小。在 FFmpeg 的官方网站了解压缩技术。
解析和码率调整：根据观看平台调整解析和比特率，移动设备设置较低。
内容交付网络 (CDN)：利用 CDN 提高视频传输速度并管理高流量。使用某些存储解决方案（例如 Vercel Blob）时，系统会自动为你处理 CDN 功能。了解更多关于 CDN 及其优势。

Next.js + Workbox 集成=》缓存策略

Next.js 允许开发者通过在 public 目录下添加 Service Worker 文件来自定义 Service Worker 逻辑。Workbox 可以在这里使用，以提供更智能的缓存策略。

Next.js 与 Workbox 集成，提供了多种缓存策略，这些策略可以通过 Workbox 易于使用的 API 来实现。以下是一些常见的缓存策略：

在 Next.js 中，你可以通过修改 Service Worker 文件（通常位于 `public` 目录下的 `service-worker.js`）来配置这些缓存策略。例如：

```javascript
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// Precache static assets
self.addEventListener('install', (event) => {
event.waitUntil(
precacheAndRoute(self.__WB_MANIFEST || [])
);
});

// Runtime caching for other assets
registerRoute(
// Match any request that ends with .jpg, .png, .svg, .gif
({ url }) => url.pathname.match(/\.(jpg|png|svg|gif)$/),
// Use stale-while-revalidate strategy
new StaleWhileRevalidate({
cacheName: 'images',
})
);
```

使用这些策略，你可以为 Next.js 应用实现高效的缓存机制，提高加载速度和用户体验。

Workbox

Workbox 是 Google 提供的一组前端开发工具，旨在简化在 Web 应用中实现 Service Worker 的过程。Workbox 包括多个模块，其中 `workbox-precaching`、`workbox-routing` 和 `workbox-strategies` 是最常用的几个模块。

可以被视为 Service Worker 的一个封装库。它提供了一组简化的 API 和工具，使得开发者能够更容易地在 Web 应用中实现 Service Worker 的功能。Workbox 的主要目标是抽象化 Service Worker 的复杂性，让开发者能够专注于实现应用的缓存策略和离线体验，而不需要深入了解 Service Worker 的内部细节。

1. **workbox-precaching**：
- 这个模块用于在 Service Worker 中预缓存一组在构建时已知的文件（即静态资源）。预缓存通常是在 Service Worker 安装阶段完成的，可以确保应用的这些关键资源在第一次访问时即可使用，甚至在离线状态下。
- 使用 `precacheAndRoute()` 方法可以自动将资源添加到缓存中，并在资源请求时返回缓存的副本。

```javascript
import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST || []);
```

2. **workbox-routing**：
- `workbox-routing` 模块提供了路由功能，允许你创建自定义的路由规则来拦截网络请求，并定义如何处理这些请求（例如返回缓存的资源或执行网络请求）。
- 使用 `registerRoute()` 方法可以注册自定义的路由规则。

```javascript
import { registerRoute } from 'workbox-routing';

registerRoute(
({url}) => url.pathname.startsWith('/images/'),
// 指定处理请求的策略
new CacheFirst()
);
```

3. **workbox-strategies**：
- `workbox-strategies` 模块包含一组预定义的缓存策略，用于定义如何存储和检索请求的响应。这些策略包括 NetworkFirst、CacheFirst、StaleWhileRevalidate、NetworkOnly 和 CacheOnly 等。
- 这些策略可以作为参数传递给 `registerRoute()` 方法，以处理匹配特定路由规则的请求。

```javascript
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
// 匹配 API 请求的路由规则
({url}) => url.pathname.startsWith('/api/'),
new NetworkFirst()
);
```

结合使用这些模块，你可以创建一个功能强大的 Service Worker，它能够处理应用的缓存需求，包括静态资源的预缓存、动态请求的缓存策略，以及自定义路由规则。Workbox 还提供了许多其他模块，如 `workbox-broadcast-update`、`workbox-cacheable-response` 和 `workbox-core` 等，用于进一步扩展 Service Worker 的功能。通过 Workbox，开发者可以更容易地构建快速、可靠的渐进式 Web 应用（PWA）。