首先，為什么需要進(jìn)行圖片壓縮：

• 減少頁面加載時(shí)間：因?yàn)閳D片是頁面中常見的資源之一，較大的圖片會(huì)增加頁面的加載時(shí)間，影響用戶體驗(yàn)，壓縮圖片可以減小圖片的文件大小，提升頁面加載速度。
• 節(jié)省網(wǎng)絡(luò)流量：在移動(dòng)設(shè)備或移動(dòng)網(wǎng)絡(luò)下，加載大型圖片可能會(huì)消耗大量的網(wǎng)絡(luò)流量，導(dǎo)致用戶的流量費(fèi)用增加，壓縮圖片可以降低文件大小，節(jié)省用戶的流量費(fèi)用。
• 節(jié)約服務(wù)器帶寬：壓縮圖片可以減少服務(wù)器帶寬流量，當(dāng)服務(wù)器響應(yīng)客戶端請求時(shí)，如果返回的是壓縮過的圖片，那么所需的傳輸時(shí)間和帶寬流量，都會(huì)比原始圖片少，這是因?yàn)閴嚎s圖片可以減小文件大小，來減少所需的傳輸時(shí)間和帶寬流量，在一些大量傳輸圖片的場景下，壓縮圖片可以減少服務(wù)器的帶寬流量，從而減低服務(wù)器成本，并提升用戶體驗(yàn)。
• 減少網(wǎng)絡(luò)擁堵：在網(wǎng)絡(luò)擁堵的情況下，下載大型圖片可能會(huì)占用較多的帶寬資源，從而導(dǎo)致其他用戶的訪問速度變慢，壓縮圖片可以減小圖片的文件大小，減少網(wǎng)絡(luò)擁堵的情況。
• 減少存儲(chǔ)空間：對于需要大量存儲(chǔ)圖片的應(yīng)用程序，如圖片分享網(wǎng)站，在線相冊等。壓縮圖片可以減少存儲(chǔ)空間的占用，降低成本。
• 保護(hù)隱私信息：一些照片中可能包含了一些隱私信息，如地理位置，時(shí)間，人臉等。如果不進(jìn)行壓縮，這些信息可能會(huì)被黑客或者不法分子利用，壓縮圖片可以消除或者減少這些信息，保護(hù)隱私安全。
• 增加搜索引擎排名：搜索引擎越來越注重網(wǎng)站的速度和性能。壓縮圖片可以加快頁面的加載速度，提高用戶體驗(yàn)。從而增加搜索引擎的排名。

在理解了項(xiàng)目中為什么要使用圖片壓縮后，可以在vite環(huán)境中vue項(xiàng)目中，先進(jìn)行不同類型圖片的引入與使用操作。

第一步：在src的目錄中assets文件夾下放置一些不同格式的圖片（.jpg，.png，.webp，.svg）

這些文件有大有小，有的有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>

運(yùn)行

npm run dev

第三步：打開調(diào)試工具Network面板

勾選Disable cache選項(xiàng)進(jìn)行無緩存的頁面請求測試，以下則可以清楚的看到各個(gè)文件類型與尺寸的大小。

那么是否可以對assets中的圖片資源進(jìn)行自動(dòng)的壓縮處理呢？？？？ 

第一步：在vue項(xiàng)目中安裝以下插件

npm i vite-plugin-image-optimizer -D

第二步：在vite.config.ts中引入模塊并配置插件使用

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不支持開發(fā)環(huán)境圖片壓縮，需要利用npm run build進(jìn)行生產(chǎn)環(huán)境項(xiàng)目打包。

運(yùn)行完畢以后，在終端中會(huì)顯示圖片壓縮的報(bào)表結(jié)果，清晰的可以查看到，如果原圖可以進(jìn)行壓縮，包括壓縮后的文件大小尺寸都有所顯示。如果插件嘗試對原圖壓縮，但壓縮后的文件反而比原圖大的話，那么將會(huì)采用skip的跳過機(jī)制，保留原圖而不使用壓縮操作。

如果覺得vite-plugin-image-optimizer默認(rèn)配置不能夠滿足項(xiàng)目對圖片優(yōu)化的需求，則可以考慮進(jìn)行自定義屬性的設(shè)置。

比如：

對jpg進(jìn)行壓縮，畫質(zhì)保留至90%。對png進(jìn)行壓縮，畫質(zhì)保留至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,
            }
        })
    ],
});

執(zhí)行npm run build打包命令以后則會(huì)看到與之前默認(rèn)配置不同的壓縮結(jié)果。

項(xiàng)目在打包以后會(huì)產(chǎn)生dist目錄，確保電腦環(huán)境中有類似serve這樣的本地服務(wù)開啟工具以后，可以嘗試在項(xiàng)目根目錄運(yùn)行serve ./dist

如果沒有serve則可以進(jìn)行下載：

npm install serve -g  全局安裝

那么以上則是壓縮前和壓縮后圖片大小的對比，那么在產(chǎn)品項(xiàng)目中的圖片已經(jīng)變得精簡太多。 

到此這篇關(guān)于vue3中實(shí)現(xiàn)圖片壓縮的示例代碼的文章就介紹到這了,更多相關(guān)vue3 圖片壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論