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

更新時(shí)間：2022年08月31日 09:33:03 作者：夕色灬琉璃

這篇文章主要介紹了vue打包添加gzip配置項(xiàng)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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才會(huì)壓縮
?? ??? ??? ? ? ? ? ?threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
?? ??? ??? ? ? ? ? ?deleteOriginalAssets: false // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
? ? ? ?? ??? ??? ?})
?? ??? ??? ?]
?? ??? ?}
?? ?}

關(guān)于我寫這篇文章的原因

之前也找了很多博客，想學(xué)習(xí)一下如何添加gzip壓縮，結(jié)果找到的所有配置都無法使用，無奈之下只能前往npm網(wǎng)站尋找文檔

最后的結(jié)果：發(fā)現(xiàn)他們的文章，在 filename 這一項(xiàng)，使用的都是filename: “[path].gz[query]”；而我在npm找到的文檔表明，應(yīng)該使用filename:"[path][base].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ù)器這邊會(huì)增加運(yùn)算，進(jìn)行壓縮運(yùn)算處理，就比如壓縮級別，服務(wù)器cpu會(huì)有開銷。

請求正常：