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

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

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

什么是gzip 壓縮

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

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

gzip的使用

前端壓縮

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

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, // 對超過10k的數(shù)據(jù)壓縮
        minRatio: 0.8 // 壓縮率小于0.8才會壓縮
      }),
		]
}

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

插件打包對比

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

配置此插件后：

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

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

配置項

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

我們簡單配置下試試

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

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