摘要:文件過(guò)大打包生成文件瀏覽器訪問效果第一步開啟配置完切記重啟后臺(tái)配置。像這樣如何識(shí)別與非請(qǐng)求請(qǐng)求非請(qǐng)求與非在響應(yīng)頭中區(qū)別就是是否表明是壓縮格式。在項(xiàng)目根目錄中內(nèi)找到,把改為。但是會(huì)報(bào)錯(cuò),提示找不到解決方法記得帶版本號(hào)
npm run build 文件過(guò)大
打包生成文件:
瀏覽器訪問效果:
第一步:Nginx開啟gzip (配置完切記重啟nginx)
后臺(tái)配置nginx.config。關(guān)于gzip壓縮代碼:
http {
gzip on; #開啟或關(guān)閉gzip on off
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip壓縮最小文件大小,超出進(jìn)行壓縮(自行調(diào)節(jié))
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 3; #壓縮級(jí)別:1-10,數(shù)字越大壓縮的越好,時(shí)間也越長(zhǎng)
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 壓縮文件類型
gzip_vary off; #跟Squid等緩存服務(wù)有關(guān),on的話會(huì)在Header里增加 "Vary: Accept-Encoding"
}
第二部:vue項(xiàng)目中config/index.js
productionGzip: true, //是否開啟gizp壓縮
productionGzipExtensions: ["js", "css"],
開啟后cnpm run build 會(huì)生成*.gz文件。
像這樣:
如何識(shí)別gzip與非gzip請(qǐng)求
gzip請(qǐng)求:
非gzip請(qǐng)求:
gzip與非gzip在響應(yīng)頭中區(qū)別就是Content-Encoding是否表明是gzip壓縮格式。
1、在項(xiàng)目 根目錄config/index.js 中 build 內(nèi)找到 productionGzip: false, 把 false改為true。與 productionSourceMap 剛好相反。
屬性值修改后,這個(gè)時(shí)候可以執(zhí)行 npm run build。但是會(huì)報(bào)錯(cuò),提示找不到 " Cannot find module "compression-webpack-plugin""
解決方法:
npm install --save-dev [email protected] //記得帶版本號(hào)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/40609.html
摘要:開發(fā)完了,并部署到服務(wù)器后,就遇到了一個(gè)非常明顯的問題。所以可以利用按需加載來(lái)進(jìn)一步縮小文件的體積。另外圖片還可以去下面這個(gè)網(wǎng)上壓縮一下經(jīng)過(guò)上述的幾步,首頁(yè)的加載速度已經(jīng)比較快了,項(xiàng)目經(jīng)理也比較滿意。初步結(jié)束了首頁(yè)加載慢的問題的研究。 本次開發(fā)的項(xiàng)目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構(gòu)。隨后在項(xiàng)目開發(fā)當(dāng)中,添加了自己寫的UI組件,和復(fù)雜的業(yè)務(wù)邏輯。整個(gè)項(xiàng)目...
摘要:對(duì)應(yīng)每一個(gè)環(huán)境可能都會(huì)有所差異,比如說(shuō)服務(wù)器地址接口地址地址等等。具體的值取決于應(yīng)用運(yùn)行的模式。會(huì)和中的選項(xiàng)相符,即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。 基于vue-cli3.0構(gòu)建功能完善的移動(dòng)端架子,主要功能包括 webpack 打包擴(kuò)展 css:sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局 跨域設(shè)置 eslint設(shè)置...
摘要:優(yōu)化空間不大主要關(guān)注另外兩個(gè)上面。目前為止,項(xiàng)目打包后的大部頭就是,這個(gè)目前的優(yōu)化空間較小。當(dāng)然,從整體優(yōu)化的大維度上來(lái)說(shuō)優(yōu)化的點(diǎn)還有很多,這個(gè)文章繼續(xù)更新下去。 項(xiàng)目現(xiàn)狀 項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測(cè)平臺(tái),引入了ehcart和three.js 負(fù)責(zé)項(xiàng)目的數(shù)據(jù)可視化;打包后,體積高達(dá)2.1M,這個(gè)體積相比于我的項(xiàng)目規(guī)模來(lái)說(shuō)就顯得稍有笨重了 使用webpack-bundle-analyzer分析了...
目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(1) —— Hello World項(xiàng)目 Weex系列(2) —— 頁(yè)面跳轉(zhuǎn)和通信 Weex系列(3) —— 單頁(yè)面還是多頁(yè)面 [Weex系列(4) —— 老生常談的三端統(tǒng)一] [Weex系列(5) —— 封裝原生組件和模塊] [Weex系列(6) —...
摘要:項(xiàng)目中前端開發(fā)問題經(jīng)驗(yàn)總結(jié)下的安全限制問題問題描述數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù),因此這邊后端考慮采用來(lái)實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來(lái)保證數(shù)據(jù)的實(shí)時(shí)性和有效性。 項(xiàng)目中前端開發(fā)問題經(jīng)驗(yàn)總結(jié) ie下websocket的安全限制問題 問題描述:數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù),因此這邊后端考慮采用websocket來(lái)實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來(lái)保證數(shù)據(jù)的實(shí)時(shí)...
閱讀 3819·2021-10-09 09:43
閱讀 2846·2021-10-08 10:05
閱讀 2720·2021-09-08 10:44
閱讀 858·2019-08-30 15:52
閱讀 2784·2019-08-26 17:01
閱讀 2982·2019-08-26 13:54
閱讀 1635·2019-08-26 10:48
閱讀 791·2019-08-23 14:41