Vue3项目性能优化（图片压缩）_vite-plugin-image-optimizer

前言

为什么需要进行图片压缩优化?

• 减小页面加载时间
• 节省网络流量
• 节约服务器带宽
• 减少网络拥堵
• 减少存储空间
• 保护隐私信息
• 增加搜索引擎排名

一、使用assets目录中的图片资源

 <img src="../assets/01.jpg"/>
 <img src="../assets/02.jpg"/>
 <img src="../assets/03.jpg"/>
 <img src="../assets/04.jpg"/>
 <img src="../assets/05.jpg"/>
 <img src="../assets/06.jpg"/>
1
2
3
4
5
6

二、Network面板调试

打开网页调试工具Network面板建议选中Disable cache停用缓存选项测试 
assets静态资源目录中图片文件有多大，network中图片资源请求就有多大
1
2

三、模块安装

npm i vite-plugin-image-optimizer -D
1

四、配置插件使用

• vite-plugin-image-optimizer不支持开发环境图片压缩

• 根目录下文件vite.config.js配置

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'

export default defineConfig({
  plugins: [
    vue(),
    ViteImageOptimizer()  
  ],
  
})
1
2
3
4
5
6
7
8
9
10
11
12

注意：当我们再次运行时，发现图片的文件大小并没有任何的变化，因为该插件应用的场景是生产模式，并不是用于开发模式，所以需要在终端中利用npmrun build进行生产环境项目打包

• 如果觉得ViteImageOptimizer默认配置不能够满足对项目优化的需求，则可以考虑自定义属性的设置

 ViteImageOptimizer({
      jpg :{
        quality : 90,
      },
      png :{
        quality : 100
      }
    })
1
2
3
4
5
6
7
8

五、serve ./dist

项目在打包完成后会产生dist目录

确保设备中有serve类似的本地服务支撑软件
如果没有则可以npm install serve -g全局安装然后在终端运行serve ./dist命令

执行完毕之后运行项目，看一下压缩前后对比

今天的内容到这里就结束啦