前端優(yōu)化vue單頁面打包后首次加載過慢的問題

今天在 部署個后臺系統(tǒng)到服務(wù)器上的時候碰到一個問題:npm run build打包出來單頁面項目的時候翘魄,出現(xiàn)首次加載特別太慢的問題,加載時間驚人的達到了十多秒舀奶,這肯定要優(yōu)化一下的暑竟。

??


img

在開始之前先看版本情況:

服務(wù)器配置:騰訊云的云服務(wù)器? 1 核 2 GB 1 Mbps? ?

系統(tǒng):CentOS 7.6

Nginx版本:nginx-1.16.0

前端vue-cli版本:2.9.6

這時候需要去適當(dāng)做一下項目的優(yōu)化了。


1育勺、首先從路由懶加載入手但荤,將頁面進行劃分罗岖,讓js在需要用到的時候再去加載。


路由懶加載

2腹躁、webpack配置gzip

可以vue -V 先看下cli版本桑包,我這邊是2.9.6

然后在項目目錄里邊的config/index.js里邊將productionGzip的值默認false設(shè)置為ture

productionGzip

3、配置Ngxin開啟gzip

打開ngxin的文件夾找到配置文件潜慎,添加下面配置捡多。

gzip on; gzip_min_length 1k;

gzip_buffers 4 16k;

gzip_http_version 1.0;

gzip_comp_level 2;

gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

gzip_vary off;

gzip_disable "MSIE [1-6]\.";

nginx配置


最后看下優(yōu)化前和優(yōu)化后的對比:

優(yōu)化前下圖:

Gzip前

優(yōu)化后下圖:


Gzip后

從兩個對比圖可以看出,在優(yōu)化前铐炫,其中一個js文件驚人的達到了800kb垒手,配上可愛的服務(wù)器,時間更是達到了11.15s5剐拧?票帷!再看下優(yōu)化后鳖悠,同一個js文件從800kb優(yōu)化到了221kb榜掌,加載時間減少到了2.85s,這個數(shù)據(jù)對比是可觀的乘综。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末憎账,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子卡辰,更是在濱河造成了極大的恐慌胞皱,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件九妈,死亡現(xiàn)場離奇詭異反砌,居然都是意外死亡,警方通過查閱死者的電腦和手機萌朱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門宴树,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晶疼,你說我怎么就攤上這事酒贬。” “怎么了冒晰?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵同衣,是天一觀的道長。 經(jīng)常有香客問我壶运,道長,這世上最難降的妖魔是什么浪秘? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任蒋情,我火速辦了婚禮埠况,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘棵癣。我一直安慰自己辕翰,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布狈谊。 她就那樣靜靜地躺著喜命,像睡著了一般。 火紅的嫁衣襯著肌膚如雪河劝。 梳的紋絲不亂的頭發(fā)上壁榕,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天,我揣著相機與錄音赎瞎,去河邊找鬼牌里。 笑死,一個胖子當(dāng)著我的面吹牛务甥,可吹牛的內(nèi)容都是我干的牡辽。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼敞临,長吁一口氣:“原來是場噩夢啊……” “哼态辛!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起挺尿,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤奏黑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后票髓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體攀涵,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年洽沟,在試婚紗的時候發(fā)現(xiàn)自己被綠了以故。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡裆操,死狀恐怖怒详,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情踪区,我是刑警寧澤昆烁,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站缎岗,受9級特大地震影響静尼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一鼠渺、第九天 我趴在偏房一處隱蔽的房頂上張望鸭巴。 院中可真熱鬧,春花似錦拦盹、人聲如沸鹃祖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽恬口。三九已至,卻和暖如春沼侣,著一層夾襖步出監(jiān)牢的瞬間祖能,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工华临, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留芯杀,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓雅潭,卻偏偏與公主長得像揭厚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子扶供,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容