自從 vue2 出正式版後, 就開始了 ssr 之旅, 不過之前用的都是虛擬主機, 部署不了 ssr, 所以也只是在本地寫著玩, 雙 11 的時候, 買了個某雲主機, 正式開始了 ssr 之旅, 然後過程並不順利, 部署, 執行都沒問題, 但是發現記憶體洩漏嚴重, 1核1g記憶體的主機根本負擔不了, 沒什麼訪問量的情況下, 幾個小時的時間, 1g 記憶體就用光, 明顯有很嚴重的記憶體洩漏, 在本地環境壓測, rps(每秒請求數) 無限接近於 1, 在雲伺服器更是壓測都完成不了, 於是開始了優化之旅
經過查資料和測試, 發現 axios 和 vue-meta 都有記憶體洩漏之嫌
vue-meta
之前有寫過一篇 vue2 ssr渲染, 如何根據不同頁面修改 meta?, 既然這個有記憶體洩漏的嫌疑, 只好先把**恢復回去
axios
axios 的***在 node 端也會導致記憶體洩漏, 因為之前版本是 spa 版的, axios 配置也是針對 spa 的配置, 裡面有用到***, 並且有大量的邏輯處理在裡面, 包括載入進度, 錯誤處理等等, 這些邏輯在 node 端是沒有任何意義的, 那麼我們就需要對 node 端寫個專門的 axios 配置檔案
快取主要包括兩個部分:
服務端的 api 資料快取
昨天已經寫了一篇文章: vue2 ssr 快取 api 資料, 這裡不再多說, 上面 axios 服務端配置檔案中, 也有相關**
元件的快取
首先先安裝lru-cache
然後在server.js裡createbundlerenderer的時候帶上快取的配置
require('vue-server-renderer').createbundlerenderer(bundle, )
})
servercachekey: () =>注意: 一般情況下, 我們不要給容器型元件, 只給展示型元件加快取, 如乙個元件是靜態元件, 如元件的資料是通過 props 傳進去的
一般情況我們都需要用 nginx 或者 apache 做埠**,
server
}
server
location /
}
效果非常不錯, rps 已經能達到 50 了, 記憶體使用也大弧度下降了, 不過在雲伺服器上依然不夠理想, 因為可能是雲伺服器上資料比本地的多, 另外雲伺服器的配置太爛...但是隨著執行時間的增加, 記憶體肯定也會上公升, 畢竟快取也是需要占用記憶體的, 不過這個是屬於合理開支...
過了差不多一天的時間, 記憶體只漲了 7m 左右...
Vue的學習之旅。
分享一下，vue各個檔案的含義，以及其表達的意思。bulid 是構建指令碼目錄 1 bulid.js 生產環境構建簡本 2 check versions.js 檢查 npm node.js 版本 3 utils.js 構建相關工具方法 4 vue loader.conf.js 配置css 載入器以及...
VUE基於NUXT的SSR 服務端渲染
server side rendering 服務端渲染 原理 將 html 在服務端渲染，合成完整的 html 檔案再輸出到瀏覽器。適用場景 nuxt 作用就是在 node.js 上進一步封裝，然後省去我們搭建服務端環境的步驟，只需要遵循這個庫的一些規則就能輕鬆實現 ssr。可以作為乙個 node....
Vue優化2 常見會導致記憶體洩漏問題及優化
上篇部落格說到vue自定義指令給元素繫結事件，事件沒有解綁會造成記憶體洩漏，下面還有一種情況 v if指令產生的記憶體洩露 v if也是乙個容易產生記憶體洩漏的地方。因為 1 v if繫結到false的值，但是實際上dom元素在隱藏的時候沒有被真實的釋放掉 2 就是非常常見的比如我們通過v if刪除...