引言
图片资源存放路径的选择
1. public目录
特点：
- 图片在路径设置时无需添加
public/，可以直接通过相对路径或./语法引用。 - 图片不会被Webpack处理和打包，直接复制到最终的
dist目录中。
优点：
- 性能优化：减少Webpack构建时间和内存消耗。
- 简化路径管理：路径简单且易于管理。
- 动态加载：适合需要动态替换的图片，如Banner、轮播图等。
适用场景：
- 上千张图片的动态加载，如图片库应用。
- 用户上传的图片，需要根据操作动态加载。
示例：
this.imgUrl = 'images/test.jpg'; // 或 this.imgUrl = './images/test.jpg';
2. src/assets目录
特点：
- 需要使用
require函数加载图片。 - 图片在Webpack打包过程中会被处理，可能被转换为base编码。
优点：
- 内部编译管理：适合存放组件共用的静态资源，如图标、精灵图等。
- 性能优化：Webpack可以优化图片资源，减少请求次数。
适用场景：
- 组件共用的静态图片资源。
- 需要Webpack进行图片优化的场景。
示例：
import img1 from '../../assets/img1.png';
let imgSrc = img1;
动态加载图片的最佳实践
方法1：使用import语句导入图片
优点：
- Webpack会将图片视为模块进行处理，确保路径正确。
示例：
<img class="img" :src="imgSrc" />
<script>
import img1 from '../../assets/img1.png';
let imgSrc = img1;
</script>
方法2：将图片资源放到static目录下
优点：
- 图片不会被Webpack处理，直接复制到
dist目录，适合静态资源。
示例：
<img src="/static/img1.png" />
性能优化技巧
1. 合理拆分组件
遵循单一职责原则，将复杂组件拆分为多个子组件，减少单个组件的复杂度。
2. 使用Vuex进行状态管理
避免直接修改prop，使用Vuex统一管理状态，减少组件间的直接通信。
3. 选择合适的条件渲染
根据场景选择v-if和v-show，v-if适用于条件不频繁变化的场景，v-show适用于频繁变化的场景。
4. 使用计算属性
利用计算属性缓存复杂逻辑的结果，避免重复计算。
5. 虚拟滚动
对于长列表，使用虚拟滚动技术，只渲染可视区域的元素，减少DOM操作。
6. 代码分割和懒加载
通过Webpack的代码分割和懒加载功能，按需加载模块，减小初始加载大小。
7. 使用CDN加载第三方库
将第三方库通过CDN加载，减少服务器的负担，提升加载速度。
8. 生产环境下使用压缩版的Vue.js
使用压缩版的Vue.js，并利用Webpack的Tree Shaking去除未使用的代码。
9. 使用Vue Devtools进行监控和调试
定期进行性能分析，找出应用的瓶颈，进行针对性优化。