快捷導(dǎo)航

vite打包優(yōu)化vite-plugin-compression的使用示例詳解

更新時(shí)間：2023年09月07日 15:52:36 作者：石小石Orz

這篇文章主要介紹了vite打包優(yōu)化vite-plugin-compression的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

什么是gzip 壓縮

當(dāng)前端資源過(guò)大時(shí)，服務(wù)器請(qǐng)求資源會(huì)比較慢。前端可以將資源通過(guò)Gzip壓縮使文件體積減少大概60%左右，壓縮后的文件，通過(guò)后端簡(jiǎn)單處理，瀏覽器可以將其正常解析出來(lái)。

如果瀏覽器的請(qǐng)求頭中包含c ontent-encoding: gzip，即證明瀏覽器支持該屬性。

gzip的使用

前端壓縮

前端使用gzip壓縮代碼很容易，通過(guò)插件即可。

vue-cli中使用compression-webpack-plugin插件。

const compressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [
      // 開啟gzip
      new compressionWebpackPlugin({
        filename: "[path][base].gz",
        algorithm: "gzip",
        test: /.js$|.css$|.html$/,
        threshold: 10240, // 對(duì)超過(guò)10k的數(shù)據(jù)壓縮
        minRatio: 0.8 // 壓縮率小于0.8才會(huì)壓縮
      }),
		]
}

vite中使用vite-plugin-compression插件

import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression()
  ]
})

瀏覽器解析

壓縮的代碼放到服務(wù)器后，需要后端配置一些東西，瀏覽器才可以解析

1、Nginx服務(wù)器只需要配置：

2、nodejs啟用gzip以express框架為例：

npm install compression 
npm install @types/compression --save-dev

import compression from 'compression';
...
const app = express();
app.use(compression());
...

compression-webpack-plugin

插件打包對(duì)比

我們著重介紹下改插件的使用。如果我們項(xiàng)目中不配置此插件，打包后的項(xiàng)目資源如下：

配置此插件后：

import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression()
  ]
})

通過(guò)打包結(jié)果，我們看出部分文件進(jìn)行了gzip壓縮。

配置項(xiàng)

可配置項(xiàng)名稱	數(shù)據(jù)類型	默認(rèn)值	釋義
verbose	boolean	true	是否在控制臺(tái)中輸出壓縮結(jié)果
filter	RegExp or (file: string) => boolean	/.(js	mjs
disable	boolean	false	是否禁用
threshold	number	1025	如果體積大于閾值，則進(jìn)行壓縮，單位為b
algorithm	string	gzip	壓縮算法，可選[‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’]
ext	string	.gz	生成的壓縮包的后綴
compressionOptions	object	-	對(duì)應(yīng)壓縮算法的參數(shù)
deleteOriginFile	boolean	-	壓縮后是否刪除源文件

我們簡(jiǎn)單配置下試試

import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression(
      {
        algorithm: 'gzip',
        threshold: 10240,
        verbose: false,
        deleteOriginFile: true
      }
    )
  ]
})

這個(gè)配置項(xiàng)，我們通過(guò)algorithm指定了壓縮算法為gzip；通過(guò)threshold指定文件大于10240b（10kb）時(shí)才壓縮文件；通過(guò)verbose禁止在控制臺(tái)輸出壓縮結(jié)果；通過(guò)deleteOriginFile指定壓縮完文件后刪除源文件。