vue怎么打包添加gzip配置項(xiàng)

這篇文章主要介紹“vue怎么打包添加gzip配置項(xiàng)”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue怎么打包添加gzip配置項(xiàng)”文章能幫助大家解決問題。

vue打包添加gzip配置項(xiàng)

安裝 compression-webpack-plugin

這邊我選用的是6.1.1版本

npm install compression-webpack-plugin@6.1.1

或者

yarn add compression-webpack-plugin@6.1.1

之后在vue.config.js中添加配置項(xiàng)

    const CompressionPlugin = require('compression-webpack-plugin')
    module.exports = {
        configureWebpack: {
            plugins: [
                new CompressionPlugin({
                    algorithm: 'gzip', // 使用gzip壓縮
                    test: /\.js$|\.css$|\.html$/, // 匹配文件名
                    filename: '[path][base].gz', // 壓縮后的文件名(保持原文件名，后綴加.gz)
                    minRatio: 0.8, // 壓縮率小于0.8才會壓縮
                    threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
                    deleteOriginalAssets: false // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
                  })
            ]
        }
    }

vue3.0配置gzip 及 資源404

第一步:vue.config.js

    plugins: [
      new CompressionPlugin({
        test:productionGzipExtensions, //匹配文件名
        threshold: 10240,//對超過10k的數(shù)據(jù)壓縮
        deleteOriginalAssets: true //不刪除源文件
      })
    ],

打包效果

第二步:這里使用 nginx 進(jìn)行配置

這里遇到了 小問題 ：

deleteOriginalAssets: true //不刪除源文件 為true時(shí)，頁面加載資源呈404，需要配置nginx開啟打包靜態(tài)文件

nginx.conf
 
   gzip  on;
	gzip_static on; # 開啟靜態(tài)文件壓縮
    gzip_min_length  1k; # 不壓縮臨界值，大于1K的才壓縮
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # #進(jìn)行壓縮的文件類型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

開啟Nginx gzip壓縮非常簡單，達(dá)到的效果可以壓縮靜態(tài)文件大小、提高頁面訪問速度、節(jié)省流量和帶寬是很有幫助的，也為用戶省去了很多流量；唯一的不足就是開啟之后服務(wù)器這邊會增加運(yùn)算，進(jìn)行壓縮運(yùn)算處理，就比如壓縮級別，服務(wù)器cpu會有開銷。

請求正常：

關(guān)于“vue怎么打包添加gzip配置項(xiàng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。