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

目錄 使用前 使用后 方法 基本原理 具體使用 1.安裝插件 2.配置插件 3.nginx配置 使用前 使用后 方法 webpack配置Compression-webpack-plugin壓縮gzip文件 作用：提升網絡傳輸率-優化web頁面加載時

目錄

• 使用前
• 使用后
• 方法
• 基本原理
• 具體使用
• 1.安裝插件
• 2.配置插件
• 3.nginx配置

使用前

使用后

方法

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

作用：提升網絡傳輸率->優化web頁面加載時間

基本原理

• 瀏覽器請求資源文件時會自動帶一個Accept-Encoding的請求頭告訴服務器支持的壓縮編碼類型
• 服務器配置開啟gzip選項：接收客戶端資源文件請求，查看請求頭Content-encoding支持的壓縮編碼格式，如果是包含gzip那么在每次響應資源請求之前進行gzip編碼壓縮后再響應返回資源文件(在響應頭會帶上Content-encoding: gzip)
• 瀏覽器接收到響應后查看請求頭是否帶有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為關閉
    gzip_static on; 
    gzip_min_length 1k; #設置允許壓縮的頁面最小字節數，頁面字節數從header頭中的Content-Length中進行獲取。默認值是0，不管頁面多大都壓縮。建議設置成大于1k的字節數，小于1k可能會越壓越大。
    gzip_buffers 4 32k; #獲取多少內存用于緩存壓縮結果，‘4 16k'表示以16k*4為單位獲得
    gzip_http_version 1.1; #識別http協議的版本,早起瀏覽器可能不支持gzip自解壓,用戶會看到亂碼
    gzip_comp_level 2; #gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值;
    gzip_types text/plain application/x-javascript text/css application/xml;#對特定的MIME類型生效,其中'text/html'被系統強制啟用
    gzip_vary on; #啟用應答頭"Vary: Accept-Encoding"
    gzip_disable "MSIE [1-6].";#配置禁用gzip條件，支持正則。此處表示ie6及以下不啟用gzip（因為ie低版本不支持）
}

以上就是vue項目打包開啟gzip壓縮具體使用方法的詳細內容，更多關于vue打包開啟gzip壓縮的資料請關注技圈網其它相關文章！