Vue3项目性能优化（图片压缩）

m0_64373473

已于 2023-10-25 15:50:53 修改

阅读量2.5k

点赞数 6

文章标签：前端 javascript vue

于 2023-10-25 15:18:30 首次发布

本文链接：https://blog.csdn.net/m0_64373473/article/details/134034554

版权

前言

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

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

一、使用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命令

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

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