vue項(xiàng)目打包開啟gzip壓縮具體使用方法

更新時(shí)間：2023年07月14日 09:43:41 作者：fuGUI

這篇文章主要為大家介紹了vue項(xiàng)目打包開啟gzip壓縮具體使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

使用前

使用后

方法

webpack配置Compression-webpack-plugin壓縮gzip文件

作用：提升網(wǎng)絡(luò)傳輸率->優(yōu)化web頁(yè)面加載時(shí)間

基本原理

瀏覽器請(qǐng)求資源文件時(shí)會(huì)自動(dòng)帶一個(gè)Accept-Encoding的請(qǐng)求頭告訴服務(wù)器支持的壓縮編碼類型
服務(wù)器配置開啟gzip選項(xiàng)：接收客戶端資源文件請(qǐng)求，查看請(qǐng)求頭Content-encoding支持的壓縮編碼格式，如果是包含gzip那么在每次響應(yīng)資源請(qǐng)求之前進(jìn)行g(shù)zip編碼壓縮后再響應(yīng)返回資源文件(在響應(yīng)頭會(huì)帶上Content-encoding: gzip)
瀏覽器接收到響應(yīng)后查看請(qǐng)求頭是否帶有Content-encoding:gzip，如果有進(jìn)行對(duì)返回的資源文件進(jìn)行解壓縮然后再進(jìn)行解析渲染

具體使用

1.安裝插件

npm install --save-dev compression-webpack-plugin

2.配置插件

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {...},
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
            .use(new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: true
            }));
        }
    },
};

或者

const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ['js', 'css']
module.exports = {
 configureWebpack: {
    // provide the app's title in webpack's name field, so that it can be accessed
    // in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery',
      }),
      new CompressionPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ],
  }
}

3.nginx配置

http {
  gzip on; #on為啟用，off為關(guān)閉
    gzip_static on; 
    gzip_min_length 1k; #設(shè)置允許壓縮的頁(yè)面最小字節(jié)數(shù)，頁(yè)面字節(jié)數(shù)從header頭中的Content-Length中進(jìn)行獲取。默認(rèn)值是0，不管頁(yè)面多大都?jí)嚎s。建議設(shè)置成大于1k的字節(jié)數(shù)，小于1k可能會(huì)越壓越大。
    gzip_buffers 4 32k; #獲取多少內(nèi)存用于緩存壓縮結(jié)果，‘4 16k'表示以16k*4為單位獲得
    gzip_http_version 1.1; #識(shí)別http協(xié)議的版本,早起瀏覽器可能不支持gzip自解壓,用戶會(huì)看到亂碼
    gzip_comp_level 2; #gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值;
    gzip_types text/plain application/x-javascript text/css application/xml;#對(duì)特定的MIME類型生效,其中'text/html'被系統(tǒng)強(qiáng)制啟用
    gzip_vary on; #啟用應(yīng)答頭"Vary: Accept-Encoding"
    gzip_disable "MSIE [1-6].";#配置禁用gzip條件，支持正則。此處表示ie6及以下不啟用gzip（因?yàn)閕e低版本不支持）
}

以上就是vue項(xiàng)目打包開啟gzip壓縮具體使用方法的詳細(xì)內(nèi)容，更多關(guān)于vue打包開啟gzip壓縮的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: