Vue 3项目初始化即配置图片懒加载与资源优化：一用IntersectionObserver封装轻量v-lazy指令；二规范public/与src/assets/资源存放及WebP自动转换；三通过分包、gzip/brotli压缩、体积分析工具优化构建；四统一骨架屏、宽高属性与占位策略提升运行时体验。
Vue 3 项目初始化阶段就配置好图片懒加载和资源优化，能避免后期重构成本，让性能从第一天起就在线。重点不是堆功能，而是选对时机、用对方式——懒加载要轻量可维护，资源优化要覆盖构建、传输、渲染三层。
一、图片懒加载：优先用 IntersectionObserver 指令封装
不推荐在 main.js 写一堆逻辑，也不建议直接引入重型插件（如 vue-lazyload）。推荐封装为轻量插件，基于浏览器原生 IntersectionObserver 实现，零依赖、无兼容性包袱（现代浏览器全覆盖）。
- 新建 src/directives/lazy.ts，导出指令对象，支持 loading/error 占位图配置
- 在指令 mounted 钩子中创建 observer，监听元素是否进入视口；触发时将
binding.value.src赋给el.src，并立即unobserve避免重复加载 - 在 main.ts 中注册为全局指令：
app.directive('lazy', lazyDirective) - 模板中使用：
<img v-lazy="{ src: item.imgUrl, loading: '/loading.svg', error: '/error.png' }" />
二、静态资源：从存放位置到加载策略一步到位
图片资源本身的质量和引用方式，直接影响首屏体积和加载体验。初始化就要定规矩：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
-
public/ 下只放真正不变的资源（如 favicon、404 页面图），路径以
/开头，不走构建流程 -
src/assets/ 存放业务图片，全部通过模块化导入（
import avatar from '@/assets/img/avatar.jpg'），享受 webpack/Vite 的 hash 命名、压缩、格式转换（如自动转 WebP） - 配置 vite.config.ts 启用 imageMin 插件（如 vite-plugin-imagemin）或使用 vite-plugin-webp，让构建时自动生成 WebP 备用图
- 在
<img>标签中搭配<picture>+<source type="image/webp">，兼顾兼容与体积
三、构建层资源优化：分包 + 压缩 + 分析工具同步接入
初始化时就跑通构建优化链路，比上线前临时加更可靠：
立即学习“前端免费学习笔记（深入）”；
- 在 vite.config.ts 的
build.rollupOptions.manualChunks中拆分 vendor 包（如vue、vue-router、axios），确保第三方库独立缓存 - 启用 gzip 和 brotli 预压缩（vite-plugin-compression），构建后自动生成
.gz和.br文件，Nginx 或 CDN 可直接识别返回 - 集成 rollup-plugin-visualizer，首次构建就生成 dependency map，看清谁在拖慢包体积
- 添加
build.chunkSizeWarningLimit并设为 500（单位 KB），主动拦截过大 chunk
四、运行时体验补足：骨架屏 + 占位策略写进脚手架
懒加载解决的是“什么时候加载”，但用户感知的是“有没有东西在动”。初始化就约定视觉反馈规范：
- 首页及长列表页默认启用骨架屏组件（如
<home-skeleton v-if="!loaded" />），不依赖第三方 UI 库，用纯 CSS 实现波纹动画 - 所有
v-lazy图片统一加width、height或aspect-ratio，防止加载时布局抖动（CLS） - 为图片容器设置背景色或 SVG 占位，例如
background: #f5f5f5 url('/placeholder.svg') center/cover no-repeat
