vue3中實現(xiàn)圖片壓縮的示例代碼

更新時間：2024年02月03日 16:15:24 作者：開心點啦.

圖片壓縮是一種比較便捷的壓縮方式,本文主要介紹了vue3中實現(xiàn)圖片壓縮的示例代碼,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧

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

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

第一步：在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

第三步：打開調試工具Network面板

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

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

第一步：在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進行生產環(huán)境項目打包。

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

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

比如：

對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,
            }
        })
    ],
});

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

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

如果沒有serve則可以進行下載：