Vue CLI3 開啟gzip壓縮文件的方式
更新時間：2018年09月30日 08:38:45 作者：楊 小匠
gizp壓縮是一種http請求優(yōu)化方式，通過減少文件體積來提高加載速度。這篇文章主要介紹了Vue CLI3 開啟gzip壓縮,需要的朋友可以參考下
gizp壓縮是一種http請求優(yōu)化方式，通過減少文件體積來提高加載速度。html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮，可以減小60%以上的體積。
webpack在打包時可以借助 compression webpack plugin 實現(xiàn)gzip壓縮，首先需要安裝該插件：
npm i -D compression-webpack-plugin
在vue cli3.0 生成的項目里，可在 vue.config.js 中按照如下方式進行配置：
壓縮前后大小大致如下：
生成的壓縮文件以.gz為后綴：
一般瀏覽器都已支持.gz的資源文件，在http請求的Request Headers 中能看到 Accept-Encoding:gzip
要使服務(wù)器返回.gz文件，還需要對服務(wù)器進行配置，根據(jù)Request Headers的Accept-Encoding標簽進行鑒別，如果支持gzip就返回.gz文件。
總結(jié)
以上所述是小編給大家介紹的Vue CLI3 開啟gzip壓縮文件的方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue利用插件實現(xiàn)按比例切割圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運行文件的問題以及相關(guān)配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Composition Api封裝業(yè)務(wù)hook思路示例分享
這篇文章主要為大家介紹了Composition Api封裝業(yè)務(wù)hook的思路示例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue3+Element?Plus?v-model實現(xiàn)父子組件數(shù)據(jù)同步的案例代碼
這篇文章主要介紹了vue3+Element?Plus?v-model實現(xiàn)父子組件數(shù)據(jù)同步,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue2過渡標簽transition使用動畫方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vant實現(xiàn)上傳多個圖片或視頻,更改視頻預(yù)覽圖
這篇文章主要介紹了Vant實現(xiàn)上傳多個圖片或視頻,更改視頻預(yù)覽圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了關(guān)于vue中v-model失效原因以及解決方案的相關(guān)資料,vue的v-model是一個雙向綁定的數(shù)據(jù)流,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了用vue快速開發(fā)app的腳手架工具，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了Vue學習筆記之表單輸入綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能
這篇文章主要為大家詳細介紹了Vue如何使用js-audio-recorder實現(xiàn)錄制,播放與下載音頻功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2023-12-12