＜span class=“js_title_inner“＞网站性能优化＜/span＞-深圳市維司達科技有限公司

网站性能优化

作者：淘书创始人

摘要

网站性能优化

性能优化说明

优化概述

针对网页加载过慢的问题，进行了全面的性能优化，主要包括以下几个方面：

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, '加载中...')