如何提高前端应用的性能？
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **Tree Shaking**（Webpack/Rollup）：移除未使用的代码。
- **图片优化**：使用 WebP/AVIF 格式，`sharp` 或 `imagemin` 压缩图片。
#### **2. 优化加载策略**
- **懒加载**：`<img loading="lazy">` 或 `IntersectionObserver` 动态加载资源。
- **代码分割**：`React.lazy()` + `Suspense` 或 `import()` 动态加载组件。
- **预加载关键资源**：`<link rel="preload" href="main.js" as="script">`。
#### **3. 缓存策略**
- **强缓存**：`Cache-Control: max-age=31536000`（静态资源）。
- **协商缓存**：`ETag`/`Last-Modified`（频繁更新的资源）。
- **Service Worker**：PWA 离线缓存（`workbox-webpack-plugin`）。
#### **4. 减少渲染阻塞**
- **CSS 内联关键路径**：`critters` 提取首屏 CSS。
- **异步加载非关键 JS**：`<script defer>` 或 `<script async>`。
- **避免布局抖动**：使用 `transform`/`opacity` 触发 GPU 加速。
#### **5. 性能监控**
- **Lighthouse**：自动化评分。
- **Web Vitals**：监控 `CLS`、`FID`、`LCP`。
- **Performance API**：`performance.mark()` 手动测量关键任务。
#### **示例：React 优化**
```jsx
// 1. 使用 React.memo 避免重复渲染
co
### **前端性能优化核心方案**
#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **Tree Shaking**（Webpack/Rollup）：移除未使用的代码。
- **图片优化**：使用 WebP/AVIF 格式，`sharp` 或 `imagemin` 压缩图片。
#### **2. 优化加载策略**
- **懒加载**：`<img loading="lazy">` 或 `IntersectionObserver` 动态加载资源。
- **代码分割**：`React.lazy()` + `Suspense` 或 `import()` 动态加载组件。
- **预加载关键资源**：`<link rel="preload" href="main.js" as="script">`。
#### **3. 缓存策略**
- **强缓存**：`Cache-Control: max-age=31536000`（静态资源）。
- **协商缓存**：`ETag`/`Last-Modified`（频繁更新的资源）。
- **Service Worker**：PWA 离线缓存（`workbox-webpack-plugin`）。
#### **4. 减少渲染阻塞**
- **CSS 内联关键路径**：`critters` 提取首屏 CSS。
- **异步加载非关键 JS**：`<script defer>` 或 `<script async>`。
- **避免布局抖动**：使用 `transform`/`opacity` 触发 GPU 加速。
#### **5. 性能监控**
- **Lighthouse**：自动化评分。
- **Web Vitals**：监控 `CLS`、`FID`、`LCP`。
- **Performance API**：`performance.mark()` 手动测量关键任务。
#### **示例：React 优化**
```jsx
// 1. 使用 React.memo 避免重复渲染
co
展开
评论
点赞