分享一个应用:vue3中实现图片压缩。
首先,为什么需要进行图片压缩:
在理解了项目中为什么要使用图片压缩后,可以在vite环境中vue项目中,先进行不同类型图片的引入与使用操作。
这些文件有大有小,有的有86.9KB,有的有540KB
第二步:引入图片
<template>
<img src="./assets/pig.webp" />
<img src="./assets/cat.jpg" />
<img src="./assets/cat.png" />
<img src="./assets/dog.png" />
<img src="./assets/vue.svg" />
</template>
运行
npm run dev
勾选Disable cache选项进行无缓存的页面请求测试,以下则可以清楚的看到各个文件类型与尺寸的大小。
npm i vite-plugin-image-optimizer -D
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
export default defineConfig({
plugins:[
vue(),
ViteImageOptimizer()
],
});
vite-plugin-image-optimizer不支持开发环境图片压缩,需要利用npm run build进行生产环境项目打包。
运行完毕以后,在终端中会显示图片压缩的报表结果,清晰的可以查看到,如果原图可以进行压缩,包括压缩后的文件大小尺寸都有所显示。如果插件尝试对原图压缩,但压缩后的文件反而比原图大的话,那么将会采用skip的跳过机制,保留原图而不使用压缩操作。
如果觉得vite-plugin-image-optimizer默认配置不能够满足项目对图片优化的需求,则可以考虑进行自定义属性的设置。
比如:
对jpg进行压缩,画质保留至90%。对png进行压缩,画质保留至100%。
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
export default defineConfig({
plugins:[
vue(),
ViteImageOptimizer({
jpg:{
quality:90,
},
png:{
quality:100,
}
})
],
});
执行npm run build打包命令以后则会看到与之前默认配置不同的压缩结果。
项目在打包以后会产生dist目录,确保电脑环境中有类似serve这样的本地服务开启工具以后,可以尝试在项目根目录运行serve ./dist
如果没有serve则可以进行下载:
npm install serve -g 全局安装
那么以上则是压缩前和压缩后图片大小的对比,那么在产品项目中的图片已经变得精简太多。