快捷導(dǎo)航

vue項(xiàng)目開啟gzip壓縮功能簡(jiǎn)單實(shí)例

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

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

一、安裝compression-webpack-plugin

compression-webpack-plugin文檔

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

二、修改vue.config.js文件

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

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

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

三、在nodejs中使用

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

1.將dist文件放放在含有nodejs后臺(tái)的文件夾下

2.修改server.js文件

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

app.use((request, response, next) => {
	//由于我是把server.js和dist文件夾放在同一路徑下，因此需要拼接
    const fullPath = path.join(__dirname,'dist',`${request.originalUrl}.gz`);     
    // 檢測(cè)是否存在同名.gz壓縮文件
    if (fs.existsSync(fullPath)) {
        // 存在就告訴瀏覽器用gzip編碼格式來(lái)解析，并把對(duì)應(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方法，指定端口號(hào)并啟動(dòng)web服務(wù)器
app.listen(3140,function(){
    console.log('Express server running at http://127.0.0.1:3140');
})