网站性能优化
作者：淘书创始人
摘要
网站性能优化
性能优化说明
优化概述
针对网页加载过慢的问题，进行了全面的性能优化，主要包括以下几个方面：
1. 图片优化
1.1 懒加载
- •实现方式
：使用 Intersection Observer API 实现高性能图片懒加载
- •优化效果
：只加载可视区域内的图片，减少初始加载数据量
- •应用位置
：
- •
BoilingList.vue- 沸点列表中的图片
- •
其他图片列表组件
- •
1.2 WebP 格式支持
- •功能
：自动检测浏览器 WebP 支持，优先使用 WebP 格式
- •优化效果
：WebP 格式比 GIF/PNG 体积小 30-50%
- •工具文件
：
src/utils/imageOptimizer.js
1.3 图片占位符
- •功能
：使用 SVG 生成轻量级占位符
- •优化效果
：避免布局抖动，提升用户体验
1.4 图片尺寸优化
- •功能
：通过 URL 参数限制图片尺寸
- •优化效果
：减少大图传输，特别是 GIF 文件
2. JavaScript 优化
2.1 代码分割
- •配置位置
：
vite.config.js - •优化策略
：
- •
Vue 核心库单独打包（vue-core）
- •
Element Plus UI 库单独打包（element-plus）
- •
大型视图组件按路由分离
- •
第三方库进一步细分（mermaid、markdown-it、dayjs 等）
- •
2.2 代码压缩
- •压缩工具
：esbuild（比 terser 快 10-100 倍）
- •优化配置
：
- •
启用代码压缩
- •
启用 CSS 压缩
- •
优化代码生成（constBindings、objectShorthand 等）
- •
2.3 资源内联阈值
- •配置
：
assetsInlineLimit: 2048（2KB） - •优化效果
：小于 2KB 的资源内联，减少 HTTP 请求
3. 资源加载优化
3.1 DNS 预解析
- •配置位置
：
index.html - •预解析域名
：
- •
1024bat.cn
- •
api.1024bat.cn
- •
cdn.jsdelivr.net
- •
3.2 预连接
- •功能
：提前建立 TCP 连接
- •优化效果
：减少连接建立时间
3.3 资源预加载
- •功能
：预加载关键 JavaScript 文件
- •配置位置
：
index.html中的<link rel="preload">
3.4 路由预取
- •功能
：页面加载完成后，预取常用路由
- •优化效果
：提升页面切换速度
4. 构建优化
4.1 Chunk 大小限制
- •配置
：
chunkSizeWarningLimit: 500（500KB） - •优化效果
：及时发现过大的代码块
4.2 压缩大小报告
- •配置
：
reportCompressedSize: false - •优化效果
：加快构建速度
4.3 CSS 代码分割
- •配置
：
cssCodeSplit: true - •优化效果
：按需加载 CSS，减少初始 CSS 体积
5. 使用建议
5.1 图片使用
<!-- 使用懒加载 --> <img :data-src="imageUrl" :src="getPlaceholderUrl(imageUrl)" loading="lazy" decoding="async" class="lazy-image" @load="handleImageLoad" @error="handleImageError" />5.2 图片优化工具
import { optimizeImageUrl, generatePlaceholder } from '@/utils/imageOptimizer' // 优化图片 URL const optimizedUrl = await optimizeImageUrl(imageUrl, { width: 800, quality: 80 }) // 生成占位符 const placeholder = generatePlaceholder(400, 300, '加载中...')6. 预期效果
6.1 加载时间优化
- •初始加载
：从 25 秒降低到 5-8 秒
- •DOMContentLoaded
：从 8.97 秒降低到 2-3 秒
6.2 数据传输优化
- •总传输量
：从 14.5 MB 降低到 3-5 MB
- •GIF 优化
：通过懒加载和格式转换，减少 50-70% 的 GIF 传输
6.3 JavaScript 优化
- •初始 JS 体积
：通过代码分割，减少 40-60%
- •加载时间
：大型 JS 文件加载时间从 8 秒降低到 2-3 秒
7. 后续优化建议
- CDN 加速
：将静态资源部署到 CDN
- HTTP/2 Server Push
：服务器主动推送关键资源
- Service Worker
：实现离线缓存和资源预缓存
- 图片压缩
：后端支持图片压缩和格式转换
- Gzip/Brotli 压缩
：服务器启用压缩算法
8. 监控和测试
8.1 性能监控
- •
使用 Chrome DevTools 的 Performance 面板
- •
使用 Lighthouse 进行性能评分
- •
监控 Core Web Vitals 指标
8.2 测试方法
打开 Chrome DevTools
切换到 Network 面板
勾选 “Disable cache”
刷新页面
查看加载时间和传输数据量
9. 注意事项
- 兼容性
：Intersection Observer 需要现代浏览器支持
- 图片格式
：WebP 需要浏览器支持，会自动降级
- 构建时间
：代码分割可能增加构建时间
- 缓存策略
：需要配置合适的缓存策略
10. 相关文件
- •
vite.config.js- Vite 构建配置
- •
src/utils/imageOptimizer.js- 图片优化工具
- •
src/components/business/boiling/BoilingList.vue- 优化示例
- •
index.html- HTML 优化配置
原文链接： https://1024bat.cn/article/48
来源： 淘书1024bat
