今天在 部署個后臺系統(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后