快捷導(dǎo)航

vue項目開啟gzip壓縮功能簡單實例

更新時間：2023年07月24日 11:29:44 作者：阿吧阿巴阿巴

這篇文章主要給大家介紹了關(guān)于vue項目開啟gzip壓縮功能的相關(guān)資料,gizp壓縮是一種http請求優(yōu)化方式,通過減少文件體積來提高加載速度,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

一、安裝compression-webpack-plugin

//新版本不太兼容，推薦這個版本
npm install compression-webpack-plugin@6.1.1 --save-dev

二、修改vue.config.js文件

// 1.先引入
const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 2.在configureWebpack下面進行配置（基本配置）
plugins: [
    new CompressionWebpackPlugin({
      // [file] 會被替換成原始資源。[path] 會被替換成原始資源的路徑，[query] 會被替換成查詢字符串
      filename: '[path][base].gz',
      // 壓縮成gzip
      algorithm: 'gzip',
      // 使用正則給匹配到的文件做壓縮，這里是給html、css、js以及字體做壓縮
      test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, 
      // 只有大小大于該值的資源會被處理。單位是 bytes。默認值是 0。
      threshold: 10240,
      // 只有壓縮率小于這個值的資源才會被處理。默認值是 0.8。
      minRatio: 0.8
    })
  ]

// 3.然后 yarn build 進行打包得到dist文件夾，就可以看到生成了很多gzip后綴的文件

三、在nodejs中使用

由于我是用nodejs搭建的服務(wù)器，因此只記錄用node使用的情況。

1.將dist文件放放在含有nodejs后臺的文件夾下

2.修改server.js文件

const path = require('path');
const fs = require('fs');
//導(dǎo)入express模塊
const express = require('express')
//創(chuàng)建express的服務(wù)器實例
const app = express()

app.use((request, response, next) => {
	//由于我是把server.js和dist文件夾放在同一路徑下，因此需要拼接
    const fullPath = path.join(__dirname,'dist',`${request.originalUrl}.gz`);     
    // 檢測是否存在同名.gz壓縮文件
    if (fs.existsSync(fullPath)) {
        // 存在就告訴瀏覽器用gzip編碼格式來解析，并把對應(yīng)的“.gz”格式文件發(fā)送給瀏覽器。
        response.setHeader('Content-Encoding', 'gzip')  
        response.sendFile(fullPath);
    } else {
        next()
    }
   })

//將dist目錄托管為靜態(tài)資源服務(wù)器
app.use(express.static('./dist'))

//調(diào)用app.listen方法，指定端口號并啟動web服務(wù)器
app.listen(3140,function(){
    console.log('Express server running at http://127.0.0.1:3140');
})