Vue CLI3 開(kāi)啟gzip壓縮文件的方式
gizp壓縮是一種http請(qǐng)求優(yōu)化方式，通過(guò)減少文件體積來(lái)提高加載速度。html、js、css文件甚至json數(shù)據(jù)都可以用它壓縮，可以減小60%以上的體積。
webpack在打包時(shí)可以借助 compression webpack plugin 實(shí)現(xiàn)gzip壓縮，首先需要安裝該插件：
npm i -D compression-webpack-plugin
在vue cli3.0 生成的項(xiàng)目里，可在 vue.config.js 中按照如下方式進(jìn)行配置：
壓縮前后大小大致如下：
生成的壓縮文件以.gz為后綴：
一般瀏覽器都已支持.gz的資源文件，在http請(qǐng)求的Request Headers 中能看到 Accept-Encoding:gzip
要使服務(wù)器返回.gz文件，還需要對(duì)服務(wù)器進(jìn)行配置，根據(jù)Request Headers的Accept-Encoding標(biāo)簽進(jìn)行鑒別，如果支持gzip就返回.gz文件。
總結(jié)
以上所述是小編給大家介紹的Vue CLI3 開(kāi)啟gzip壓縮文件的方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要介紹了React中構(gòu)建一個(gè)簡(jiǎn)單的樹(shù)形組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
VUE項(xiàng)目中加載已保存的筆記實(shí)例方法
在本篇文章里小編給大家整理了一篇關(guān)于VUE項(xiàng)目中加載已保存的筆記實(shí)例方法，有興趣的讀者們可以參考下。2019-09-09
在實(shí)際的Vue開(kāi)發(fā)中,我們經(jīng)常需要在多個(gè)組件之間共享一些工具函數(shù)或類,比如格式化日期、處理字符串、操作數(shù)組等,本文將詳細(xì)介紹如何在Vue實(shí)例上掛載自己定義的工具類,并在項(xiàng)目中高效使用這些工具,需要的朋友可以參考下2024-09-09
elementui中el-input回車(chē)搜索實(shí)現(xiàn)示例
這篇文章主要介紹了elementui中el-input回車(chē)搜索實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
Vue.js使用this.$confirm換行顯示提示信息實(shí)例
在編寫(xiě)Web應(yīng)用時(shí),實(shí)現(xiàn)多行文本顯示通常需要用到HTML標(biāo)簽或JavaScript特定函數(shù),本文介紹了如何使用JavaScript的$createElement函數(shù)來(lái)創(chuàng)建多行文本顯示,$createElement可以創(chuàng)建任何HTML標(biāo)簽,使得在JavaScript中控制HTML輸出更加靈活,通過(guò)簡(jiǎn)單的代碼示例2024-10-10
vue實(shí)現(xiàn)路由不變的情況下，刷新頁(yè)面操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)路由不變的情況下，刷新頁(yè)面操作,結(jié)合實(shí)例形式分析了vue路由不變的情況下刷新頁(yè)面具體原理、操作方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼
本文主要介紹了vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
雖然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時(shí)有一定的變化。接下來(lái)就學(xué)習(xí)學(xué)習(xí)它是如何使用的2021-11-11
Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑
有一些驗(yàn)證不是通過(guò)input select這樣的受控組件來(lái)觸發(fā)驗(yàn)證條件的 ,可以通過(guò)自定義驗(yàn)證的方法來(lái)觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑的相關(guān)資料,需要的朋友可以參考下2023-02-02