摘要:協議上的編碼是一種用來改進應用程序性能的技術。目前主流的瀏覽器等都支持該協議。啟用或禁用響應??山邮艿闹捣秶鸀榈健TO置將被壓縮的響應的最小長度。長度僅由響應頭字段確定。而里面的只是表示前端用戶瀏覽器支持的壓縮方式。
gzip是GNUzip的縮寫,它是一個GNU自由軟件的文件壓縮程序。它最早由Jean-loup Gailly和Mark Adler創建,用于UNⅨ系統的文件壓縮。我們在Linux中經常會用到后綴為.gz的文件,它們就是GZIP格式的?,F今已經成為Internet 上使用非常普遍的一種數據壓縮格式,或者說一種文件格式。
HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓用戶感受更快的速度。減少文件大小有兩個明顯的好處,一是可以減少存儲空間,二是通過網絡傳輸文件時,可以減少傳輸的時間。
當然WEB服務器和客戶端(瀏覽器)必須共同支持gzip。目前主流的瀏覽器Chrome,firefox,IE等都支持該協議。常見的服務器如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響應。# gzip on; #設置用于壓縮響應的緩沖區number和size。默認情況下,緩沖區大小等于一個內存頁面。這是4K或8K,具體取決于平臺。# gzip_static on; #啟用或禁用gzipping響應。# gzip_buffers 4 16k; #設置level響應的gzip壓縮??山邮艿闹捣秶鸀?到9。# gzip_comp_level 5; #設置將被gzip壓縮的響應的最小長度。長度僅由“Content-Length”響應頭字段確定。# 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配置,重啟服務。
關于gzip詳細的配置和描述,請查閱 Module ngx_http_gzip_module
至此,gzip已開啟。你可以運行你的項目去檢測一下。
打開Chrome控制臺,可以看到Network下的Response Headers中返回了Content-Encoding: gzip,表明gzip開啟成功。
而Request Headers里面的Accept-Encoding: gzip只是表示前端(用戶瀏覽器)支持gzip的壓縮方式。
服務器支持gzip的方式可以有兩種:
1、打包的時候生成對應的.gz文件,瀏覽器請求xx.js時,服務器返回對應的xxx.js.gz文件
2、瀏覽器請求xx.js時,服務器對xx.js進行gzip壓縮后傳輸給瀏覽器
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101661.html
摘要:客戶端請求頭聲明瀏覽器支持的壓縮方式,服務端配置啟用壓縮,壓縮的文件類型,壓縮方式。建議設置成大于的字節數,小于可能會越壓越大。 背景 如果你是個前端開發人員,你肯定知道線上環境要把js,css,圖片等壓縮,盡量減少文件的大小,提升響應速度,特別是對移動端,這個非常重要。 壓縮 壓縮方式 前端壓縮的方式很多,依賴java的有ant工具,前端自己打包壓縮的有grunt,gulp,webp...
摘要:客戶端請求頭聲明瀏覽器支持的壓縮方式,服務端配置啟用壓縮,壓縮的文件類型,壓縮方式。建議設置成大于的字節數,小于可能會越壓越大。 背景 如果你是個前端開發人員,你肯定知道線上環境要把js,css,圖片等壓縮,盡量減少文件的大小,提升響應速度,特別是對移動端,這個非常重要。 壓縮 壓縮方式 前端壓縮的方式很多,依賴java的有ant工具,前端自己打包壓縮的有grunt,gulp,webp...
摘要:業務和架構不分家,架構是建立在對業務的理解之上的。主鍵最好保持順序遞增,隨機主鍵會導致聚簇索引樹頻繁分裂,隨機增多,數據離散,性能下降。沒有索引的更新,可能會導致全表數據都被鎖住。 本博客并非全部原創,其實是一個知識的歸納和匯總,里面我引用了很多網上、書上的內容。也給出了相關的鏈接。 本文涉及的知識點比較多,大家可以根據關鍵字去搜索相關的內容和購買相應的書籍進行系統的學習。不對的地方...
摘要:所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中,需要用實例的方法清除可當你有多個時,就需要重復性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積,傳輸速度更快。本文目錄 接口模塊處理 Vue組件動態注冊 頁面性能調試:Hiper Vue高階組件封裝 性能優化:eventBus封裝 webpack插件:真香 本文項目基于Vue-Cli3,想知...
摘要:自己是做前端開發的,在性能方面,根據的調查,后臺只占,而前端高達之多,其中有的東西是可以優化的。相信很多人都聽過優化網站性能的條規則。淘寶和阿里巴巴中文站目前都是這樣做的。目前的瀏覽器都能良好地支持。 相信互聯網已經越來越成為人們生活中不可或缺的一部分。Ajax,flex等等富客戶端的應用使得人們越加幸福地體驗著許多原先只能在C/S實現的功能。比如Google機會已經把最基本的o...
閱讀 2732·2023-04-25 14:21
閱讀 1167·2021-11-23 09:51
閱讀 4000·2021-09-22 15:43
閱讀 605·2019-08-30 15:55
閱讀 1550·2019-08-29 11:28
閱讀 2439·2019-08-26 11:44
閱讀 1675·2019-08-23 18:15
閱讀 2874·2019-08-23 16:42