欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue打包時gzip壓縮的兩種方案

 更新時間:2022年06月24日 14:28:26   作者:壞丶毛病  
這篇文章主要介紹了使用vue打包時gzip壓縮的兩種方案小結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

開局一張圖:

可以看出,在項目部署后,我們的資源文件請求都會保持原本大小,如果文件過大,并且很多的情況下,會導(dǎo)致網(wǎng)絡(luò)請求耗時,嚴(yán)重點可能阻塞后面的進程。

介紹兩種gzip壓縮的方式

1、打包的時候通過webpack配置生成對應(yīng)的 .gz 文件,瀏覽器請求xx.js/css等文件時,服務(wù)器返回對應(yīng)的xxx.js.gz文件;

2、瀏覽器請求xx.js文件時,服務(wù)器對xx.js文件進行g(shù)zip壓縮后傳輸給瀏覽器。

webpack打包生成gz文件

安裝插件(compression-webpack-plugin):

npm install compression-webpack-plugin --save-dev

vue.config.js文件進行webpack配置(沒有此文件可以在項目根路徑創(chuàng)建一個文件):

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

這里對js、html、css文件進行了壓縮處理,并沒有進行圖片壓縮,因為圖片壓縮并不能實際減少文件大小,反而會導(dǎo)致打包后生成很多同大小的gz文件,得不償失。

當(dāng)然了,上文提到過,瀏覽器請求xx.js/css等文件時,服務(wù)器返回對應(yīng)的xxx.js.gz文件,所以還需要在服務(wù)器配置一個屬性,以期望它能正常返回我們需要的gz文件。

這里拿nginx舉例(nginx.conf文件):

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    gzip_static on;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

其中g(shù)zip_static on這個屬性是靜態(tài)加載本地的gz文件。

看下效果:

gzip壓縮比率在5-6倍,nginx配置了靜態(tài)gz加載后,瀏覽器也返回的是gz文件,這樣就會請求小文件而不會導(dǎo)致請求卡線程,并且,因為保留了源文件,所以當(dāng)我們刪除gz后,瀏覽器會自動去請求原始文件,而不會導(dǎo)致界面出現(xiàn)任何問題(如圖二)。

靜態(tài)加載gz文件主要是依托于下面的請求頭:

服務(wù)器在線gzip壓縮

前端不用進行任何配置,也不用webpack生成gz文件,服務(wù)器進行處理,拿nginx舉例:

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    # 開啟gzip
    gzip  on;
    
    # 設(shè)置緩沖區(qū)大小
    gzip_buffers 4 16k;
    
    #壓縮級別官網(wǎng)建議是6
    gzip_comp_level 6;
 
    #壓縮的類型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
    server {
        listen       8462;
        server_name  localhost;
        location / {
            root   dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

上面有一些關(guān)于gzip的配置,首先是開啟gzip,設(shè)置緩沖區(qū)大小,壓縮的等級,需要壓縮的文件等(如果需要更詳細的配置,可以查看nginx的配置文檔),看下效果:

響應(yīng)頭中會攜帶gzip壓縮配置,每次請求xx.js文件,服務(wù)器都會進行實時壓縮。

兩種方案的優(yōu)缺點:

1、webpack打包,然后直接使用靜態(tài)的gz,缺點就是打包后文件體積太大,但是不耗服務(wù)器性能;

2、使用nginx在線gzip,缺點就是耗性能,需要實時壓縮,但是vue打包后的文件體積小。

這里可能有些同學(xué)就要問題,我想在有g(shù)z文件的時候進行靜態(tài)壓縮,不存在gz文件的時候進行在線壓縮而不是加載源文件,要怎么做呢?

簡單,兩種配置都寫上即可。

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;  

首先,gzip_static的優(yōu)先級高,會先加載靜態(tài)gz文件,當(dāng)同目錄下不存在此文件的時候,會執(zhí)行在線壓縮的命令。

有些小伙伴就會納悶,既然都開啟的情況下,我們怎么區(qū)分使用了靜態(tài)加載還是在線壓縮呢?

響應(yīng)頭的Content-Edcoding:gzip表示gzip壓縮已經(jīng)生效,而Etag中只有簡單字符表示靜態(tài)資源加載,而前面帶 W/ 表示啟動了在線壓縮。

看下圖:

就是兩種gzip壓縮的方案了。

vue項目開啟gzip壓縮

前端配置

拆完包之后,我們再用gzip做一下壓縮 安裝compression-webpack-plugin

// yarn add compression-webpack-plugin -D
// 在vue.congig.js中引入并修改webpack配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
? ? ? ? if (process.env.NODE_ENV === 'production') {
? ? ? ? ? ? // 為生產(chǎn)環(huán)境修改配置...
? ? ? ? ? ? config.mode = 'production'
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? plugins: [new CompressionPlugin({
? ? ? ? ? ? ? ? ? ? test: /\.js$|\.html$|\.css/, //匹配文件名
? ? ? ? ? ? ? ? ? ? threshold: 10240, //對超過10k的數(shù)據(jù)進行壓縮
? ? ? ? ? ? ? ? ? ? deleteOriginalAssets: false //是否刪除原文件
? ? ? ? ? ? ? ? })]
? ? ? ? ? ? }
? ? ? ? }

后端配置

在服務(wù)器我們也要做相應(yīng)的配置 如果發(fā)送請求的瀏覽器支持gzip,就發(fā)送給它gzip格式的文件 我的服務(wù)器是用express框架搭建的 只要安裝一下compression就能使用

const compression = require('compression')
app.use(compression()) ?// 在其他中間件使用之前調(diào)用

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue3中v-model語法糖的三種寫法詳解

    Vue3中v-model語法糖的三種寫法詳解

    這篇文章主要為大家詳細介紹了Vue3中v-model語法糖的三種寫法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • mpvue 單文件頁面配置詳解

    mpvue 單文件頁面配置詳解

    這篇文章主要介紹了mpvue 單文件頁面配置詳解,本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上,通過配置 mpvue-config-loader 來實現(xiàn)在 vue 文件內(nèi)書寫小程序的頁面配置,感興趣的小伙伴們可以參考一下
    2018-12-12
  • 詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link

    詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link

    這篇文章主要介紹了詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 關(guān)于vite proxy跨域問題的解決

    關(guān)于vite proxy跨域問題的解決

    這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue日歷/日程提醒/html5本地緩存功能

    vue日歷/日程提醒/html5本地緩存功能

    這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • 關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析

    關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析

    這篇文章主要介紹了關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析,在過去傳統(tǒng)開發(fā)中,頁面渲染任務(wù)是由服務(wù)端完成的,那么Nuxt是如何渲染的呢,需要的朋友可以參考下
    2023-04-04
  • vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例

    vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例

    這篇文章主要給大家介紹了關(guān)于vue3?element-plus實現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
    2023-09-09
  • Vue實現(xiàn)記住賬號密碼功能的操作過程

    Vue實現(xiàn)記住賬號密碼功能的操作過程

    這篇文章主要介紹了Vue實現(xiàn)記住賬號密碼功能,用戶登錄時若勾選“記住我”功能選項,則將登錄名和密碼(加密后)存入本地緩存,下次登錄頁面加載時自動獲取保存好的賬號和密碼(需解密),回顯到登錄輸入框中,下面分享我實現(xiàn)的具體步驟,需要的朋友可以參考下
    2022-07-07
  • vue實現(xiàn)簡單的登錄彈出框

    vue實現(xiàn)簡單的登錄彈出框

    這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的登錄彈出框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • vue中使用loadsh的debounce防抖函數(shù)問題

    vue中使用loadsh的debounce防抖函數(shù)問題

    這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11

最新評論