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

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

在理解了項目中為什么要使用圖片壓縮后，可以在vite環(huán)境中vue項目中，先進(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>

運行

npm run dev

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

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

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

第一步：在vue項目中安裝以下插件

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)境項目打包。

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

如果覺得vite-plugin-image-optimizer默認(rèn)配置不能夠滿足項目對圖片優(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打包命令以后則會看到與之前默認(rèn)配置不同的壓縮結(jié)果。

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

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

npm install serve -g  全局安裝

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

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

最新評論