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

使用后

方法

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

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

基本原理瀏覽器請求資源文件時會自動帶一個Accept-Encoding的請求頭告訴服務(wù)器支持的壓縮編碼類型服務(wù)器配置開啟gzip選項：接收客戶端資源文件請求，查看請求頭Content-encoding支持的壓縮編碼格式，如果是包含gzip那么在每次響應(yīng)資源請求之前進(jìn)行g(shù)zip編碼壓縮后再響應(yīng)返回資源文件(在響應(yīng)頭會帶上Content-encoding: gzip)瀏覽器接收到響應(yīng)后查看請求頭是否帶有Content-encoding:gzip，如果有進(jìn)行對返回的資源文件進(jìn)行解壓縮然后再進(jìn)行解析渲染具體使用1.安裝插件npm install --save-dev compression-webpack-plugin2.配置插件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中進(jìn)行獲取。默認(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)注好吧啦網(wǎng)其它相關(guān)文章！