成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue單頁(yè)面打包文件大?首次加載慢?從7.5M到1.3M蛻變

zengdongbao / 3974人閱讀

摘要:文件過(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

相關(guān)文章

  • m>vuem>2首頁(yè)加載的問題

    摘要:開發(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)目...

    canopus4u 評(píng)論0 收藏0
  • 基于m>vuem>-cli3.0構(gòu)建功能完善的移動(dò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è)置...

    Loong_T 評(píng)論0 收藏0
  • 記一次m>vuem>-webpack項(xiàng)目?jī)?yōu)化實(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分析了...

    ernest.wang 評(píng)論0 收藏0
  • Weex系列(3) —— 頁(yè)面還是多頁(yè)面

    目錄 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) —...

    monw3c 評(píng)論0 收藏0
  • 項(xiàng)目經(jīng)驗(yàn)總結(jié)

    摘要:項(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í)...

    William_Sang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<