Vue2 SSR 的優化之旅

自從 Vue2 出正式版後, 就開始了 SSR 之旅, 不過以前用的都是虛擬主機, 部署不了 SSR, 因此也只是在本地寫着玩, 雙 11 的時候, 買了個某雲主機, 正式開始了 SSR 之旅, 而後過程並不順利, 部署, 運行都沒問題, 可是發現內存泄漏嚴重, 1核1G內存的主機根本負擔不了, 沒什麼訪問量的狀況下, 幾個小時的時間, 1G 內存就用光, 明顯有很嚴重的內存泄漏, 在本地環境壓測, rps(每秒請求數) 無限接近於 1, 在雲服務器更是壓測都完成不了, 因而開始了優化之旅

1. 內存泄漏

通過查資料和測試, 發現 axios 和 vue-meta 都有內存泄漏之嫌

vue-meta

以前有寫過一篇 Vue2 SSR渲染, 如何根據不一樣頁面修改 meta?, 既然這個有內存泄漏的嫌疑, 只好先把代碼恢復回去

axios

axios 的攔截器在 node 端也會致使內存泄漏, 由於以前版本是 SPA 版的, axios 配置也是針對 SPA 的配置, 裏面有用到攔截器, 而且有大量的邏輯處理在裏面, 包括加載進度, 錯誤處理等等, 這些邏輯在 node 端是沒有任何意義的, 那麼咱們就須要對 node 端寫個專門的 axios 配置文件

• api/index-server.js (server端)
  https://github.com/lincenying...

• api/index-client.js (client端)
  https://github.com/lincenying...

2. 緩存

緩存主要包括兩個部分:

• 服務端的 api 數據緩存

• 組件的緩存

服務端的 api 數據緩存

昨天已經寫了一篇文章: Vue2 SSR 緩存 Api 數據, 這裏再也不多說, 上面 axios 服務端配置文件中, 也有相關代碼

組件的緩存

首先先安裝lru-cache
而後在server.js裏createBundleRenderer的時候帶上緩存的配置

require('vue-server-renderer').createBundleRenderer(bundle, {
    cache: require('lru-cache')({
        max: 1000, // 緩存最大數量
        maxAge: 1000 * 60 * 15, // 緩存時間 15分鐘
    })
})

在組件裏申明 key

serverCacheKey: () => {
    return `aside::account`
}

組件緩存的相關用法, 請參考官方文檔:
https://github.com/vuejs/vue/...

注意: 通常狀況下, 咱們不要給容器型組件, 只給展現型組件加緩存, 如一個組件是靜態組件, 如組件的數據是經過 props 傳進去的

3. 配置 nginx

通常狀況咱們都須要用 nginx 或者 apache 作端口轉發,

server {
    listen 80;
    server_name mmxiaowu.com www.mmxiaowu.com ssr.mmxiaowu.com;
    location / {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host  $http_host;
         proxy_set_header X-Nginx-Proxy true;
         proxy_set_header Connection "";
         proxy_pass http://127.0.0.1:8080;
    }
}

咱們能夠修改下配置文件, 讓靜態文件直接走 nginx, 再也不通過 nodejs

server {
    listen 80;
    server_name mmxiaowu.com www.mmxiaowu.com ssr.mmxiaowu.com;
    location ~ ^/(static|upload)/  {
         root /your/webroot/mmf-blog-vue2-ssr/dist;
         expires 30d;
    }
    location / {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host  $http_host;
         proxy_set_header X-Nginx-Proxy true;
         proxy_set_header Connection "";
         proxy_pass http://127.0.0.1:8080;
    }
}

通過以上一些優化後, 再進行一次壓測:

E:\web\webpack\mmf-blog-vue2-ssr>loadtest -n 2000 http://localhost:8080/
[Sat Dec 31 2016 14:12:17] INFO Requests: 0 (0%), requests per second: 0, mean latency: 0 ms
[Sat Dec 31 2016 14:12:22] INFO Requests: 246 (12%), requests per second: 49, mean latency: 20.3 ms
[Sat Dec 31 2016 14:12:27] INFO Requests: 508 (25%), requests per second: 52, mean latency: 19 ms
[Sat Dec 31 2016 14:12:32] INFO Requests: 773 (39%), requests per second: 53, mean latency: 18.8 ms
[Sat Dec 31 2016 14:12:37] INFO Requests: 1036 (52%), requests per second: 53, mean latency: 19 ms
[Sat Dec 31 2016 14:12:42] INFO Requests: 1296 (65%), requests per second: 52, mean latency: 19.2 ms
[Sat Dec 31 2016 14:12:47] INFO Requests: 1548 (77%), requests per second: 50, mean latency: 19.9 ms
[Sat Dec 31 2016 14:12:52] INFO Requests: 1776 (89%), requests per second: 46, mean latency: 21.8 ms
[Sat Dec 31 2016 14:12:57] INFO
[Sat Dec 31 2016 14:12:57] INFO Target URL:          http://localhost:8080/
[Sat Dec 31 2016 14:12:57] INFO Max requests:        2000
[Sat Dec 31 2016 14:12:57] INFO Concurrency level:   1
[Sat Dec 31 2016 14:12:57] INFO Agent:               none
[Sat Dec 31 2016 14:12:57] INFO
[Sat Dec 31 2016 14:12:57] INFO Completed requests:  2000
[Sat Dec 31 2016 14:12:57] INFO Total errors:        0
[Sat Dec 31 2016 14:12:57] INFO Total time:          39.933183222 s
[Sat Dec 31 2016 14:12:57] INFO Requests per second: 50
[Sat Dec 31 2016 14:12:57] INFO Mean latency:        19.9 ms
[Sat Dec 31 2016 14:12:57] INFO
[Sat Dec 31 2016 14:12:57] INFO Percentage of the requests served within a certain time
[Sat Dec 31 2016 14:12:57] INFO   50%      16 ms
[Sat Dec 31 2016 14:12:57] INFO   90%      27 ms
[Sat Dec 31 2016 14:12:57] INFO   95%      43 ms
[Sat Dec 31 2016 14:12:57] INFO   99%      57 ms
[Sat Dec 31 2016 14:12:57] INFO  100%      133 ms (longest request)

效果很是不錯, rps 已經能達到 50 了, 內存使用也大弧度降低了, 不過在雲服務器上依然不夠理想, 由於多是雲服務器上數據比本地的多, 另外雲服務器的配置太爛...可是隨着運行時間的增長, 內存確定也會上升, 畢竟緩存也是須要佔用內存的, 不過這個是屬於合理開支...

過了差很少一天的時間, 內存只漲了 7M 左右...