vue項目打包開啟gzip壓縮具體使用方法

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

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

使用前

使用后

方法

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

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

基本原理

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

具體使用

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

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

您可能感興趣的文章: