資訊專欄INFORMATION COLUMN
摘要：協(xié)議上的編碼是一種用來改進應(yīng)用程序性能的技術(shù)。目前主流的瀏覽器等都支持該協(xié)議。啟用或禁用響應(yīng)。可接受的值范圍為到。設(shè)置將被壓縮的響應(yīng)的最小長度。長度僅由響應(yīng)頭字段確定。而里面的只是表示前端用戶瀏覽器支持的壓縮方式。
gzip是GNUzip的縮寫，它是一個GNU自由軟件的文件壓縮程序。它最早由Jean-loup Gailly和Mark Adler創(chuàng)建，用于UNⅨ系統(tǒng)的文件壓縮。我們在Linux中經(jīng)常會用到后綴為.gz的文件，它們就是GZIP格式的。現(xiàn)今已經(jīng)成為Internet 上使用非常普遍的一種數(shù)據(jù)壓縮格式，或者說一種文件格式。
HTTP協(xié)議上的GZIP編碼是一種用來改進WEB應(yīng)用程序性能的技術(shù)。大流量的WEB站點常常使用GZIP壓縮技術(shù)來讓用戶感受更快的速度。減少文件大小有兩個明顯的好處，一是可以減少存儲空間，二是通過網(wǎng)絡(luò)傳輸文件時，可以減少傳輸?shù)臅r間。
當(dāng)然WEB服務(wù)器和客戶端（瀏覽器）必須共同支持gzip。目前主流的瀏覽器Chrome,firefox,IE等都支持該協(xié)議。常見的服務(wù)器如Apache，Nginx，IIS同樣支持gzip。
下面就以Vue項目為例，介紹一下gzip的使用（vue-cli 2.*）
1、在/config/index.js中，修改配置開啟gzip
// Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: true, productionGzipExtensions: ["js", "css"],
在修改productionGzip的默認值（false）為true之前，先安裝所需的依賴npm install --save-dev compression-webpack-plugin。
如果按上述操作完成后，打包時出錯，建議更換低版本的compression-webpack-plugin，推薦使用1.1.12或者1.1.11版本等
npm uninstall --save-dev compression-webpack-plugin
npm install --save-dev compression-webpack-plugin@1.1.12
2、在nginx中開啟gzip，/nginx/conf/nginx.conf中添加gzip配置
http:{
#啟用或禁用gzipping響應(yīng)。#
gzip on;
#設(shè)置用于壓縮響應(yīng)的緩沖區(qū)number和size。默認情況下，緩沖區(qū)大小等于一個內(nèi)存頁面。這是4K或8K，具體取決于平臺。#
gzip_static on;
#啟用或禁用gzipping響應(yīng)。#
gzip_buffers 4 16k;
#設(shè)置level響應(yīng)的gzip壓縮?？山邮艿闹捣秶鸀?到9。#
gzip_comp_level 5;
#設(shè)置將被gzip壓縮的響應(yīng)的最小長度。長度僅由“Content-Length”響應(yīng)頭字段確定。#
gzip_min_length 100;
#匹配MIME類型進行壓縮，text/html默認被壓縮。#
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg?image/gif image/png;
}
修改完nginx配置，重啟服務(wù)。
關(guān)于gzip詳細的配置和描述，請查閱 Module ngx_http_gzip_module
至此，gzip已開啟。你可以運行你的項目去檢測一下。
打開Chrome控制臺，可以看到Network下的Response Headers中返回了Content-Encoding: gzip，表明gzip開啟成功。
而Request Headers里面的Accept-Encoding: gzip只是表示前端（用戶瀏覽器）支持gzip的壓縮方式。
服務(wù)器支持gzip的方式可以有兩種：
1、打包的時候生成對應(yīng)的.gz文件，瀏覽器請求xx.js時，服務(wù)器返回對應(yīng)的xxx.js.gz文件
2、瀏覽器請求xx.js時，服務(wù)器對xx.js進行g(shù)zip壓縮后傳輸給瀏覽器
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101661.html
摘要：客戶端請求頭聲明瀏覽器支持的壓縮方式，服務(wù)端配置啟用壓縮，壓縮的文件類型，壓縮方式。建議設(shè)置成大于的字節(jié)數(shù)，小于可能會越壓越大。 背景 如果你是個前端開發(fā)人員，你肯定知道線上環(huán)境要把js，css，圖片等壓縮，盡量減少文件的大小，提升響應(yīng)速度，特別是對移動端，這個非常重要。 壓縮 壓縮方式 前端壓縮的方式很多，依賴java的有ant工具，前端自己打包壓縮的有g(shù)runt，gulp，webp...
摘要：客戶端請求頭聲明瀏覽器支持的壓縮方式，服務(wù)端配置啟用壓縮，壓縮的文件類型，壓縮方式。建議設(shè)置成大于的字節(jié)數(shù)，小于可能會越壓越大。 背景 如果你是個前端開發(fā)人員，你肯定知道線上環(huán)境要把js，css，圖片等壓縮，盡量減少文件的大小，提升響應(yīng)速度，特別是對移動端，這個非常重要。 壓縮 壓縮方式 前端壓縮的方式很多，依賴java的有ant工具，前端自己打包壓縮的有g(shù)runt，gulp，webp...
摘要：業(yè)務(wù)和架構(gòu)不分家，架構(gòu)是建立在對業(yè)務(wù)的理解之上的。主鍵最好保持順序遞增，隨機主鍵會導(dǎo)致聚簇索引樹頻繁分裂，隨機增多，數(shù)據(jù)離散，性能下降。沒有索引的更新，可能會導(dǎo)致全表數(shù)據(jù)都被鎖住。 本博客并非全部原創(chuàng)，其實是一個知識的歸納和匯總，里面我引用了很多網(wǎng)上、書上的內(nèi)容。也給出了相關(guān)的鏈接。 本文涉及的知識點比較多，大家可以根據(jù)關(guān)鍵字去搜索相關(guān)的內(nèi)容和購買相應(yīng)的書籍進行系統(tǒng)的學(xué)習(xí)。不對的地方...
摘要：所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中，需要用實例的方法清除可當(dāng)你有多個時，就需要重復(fù)性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄 接口模塊處理 Vue組件動態(tài)注冊 頁面性能調(diào)試：Hiper Vue高階組件封裝 性能優(yōu)化：eventBus封裝 webpack插件：真香 本文項目基于Vue-Cli3，想知...
摘要：自己是做前端開發(fā)的，在性能方面，根據(jù)的調(diào)查，后臺只占，而前端高達之多，其中有的東西是可以優(yōu)化的。相信很多人都聽過優(yōu)化網(wǎng)站性能的條規(guī)則。淘寶和阿里巴巴中文站目前都是這樣做的。目前的瀏覽器都能良好地支持。 相信互聯(lián)網(wǎng)已經(jīng)越來越成為人們生活中不可或缺的一部分。Ajax，flex等等富客戶端的應(yīng)用使得人們越加幸福地體驗著許多原先只能在C/S實現(xiàn)的功能。比如Google機會已經(jīng)把最基本的o...
閱讀 2741·2023-04-25 14:21
閱讀 1176·2021-11-23 09:51
閱讀 4019·2021-09-22 15:43
閱讀 612·2019-08-30 15:55
閱讀 1560·2019-08-29 11:28
閱讀 2448·2019-08-26 11:44
閱讀 1684·2019-08-23 18:15
閱讀 2883·2019-08-23 16:42
