Vue3项目性能优化(图片压缩)

前言

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

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

一、使用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"/>

在这里插入图片描述

二、Network面板调试

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

在这里插入图片描述
在这里插入图片描述

三、模块安装

npm i vite-plugin-image-optimizer -D

四、配置插件使用

  • 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()  
  ],
  
})

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

  • 如果觉得ViteImageOptimizer默认配置不能够满足对项目优化的需求,则可以考虑自定义属性的设置
 ViteImageOptimizer({
      jpg :{
        quality : 90,
      },
      png :{
        quality : 100
      }
    })

五、serve ./dist

项目在打包完成后会产生dist目录
在这里插入图片描述

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

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

今天的内容到这里就结束啦
在这里插入图片描述

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值