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 及其优势。
