VUE項目內存泄漏：

場景1：頁面結構復雜，內嵌子組件數量較多

場景2：高頻使用(切換路由導致頁面組件銷毀創建過多)

結果：頁面卡頓且瀏覽器窗口占用內存較高

檢測：

相信不少前端開發在界面結構復雜的VUE大項目或者高頻使用的VUE項目上，也曾遇到頁面使用過程中卡頓問題，通常打開瀏覽器窗口任務管理器，查詢當前窗口所占用內存是否很高。

瀏覽器運行使用的JS內存(僅指JS堆棧內存，見瀏覽器窗口任務管理器 【JavaScript使用的內存】為2G，當超過2G瀏覽器就會崩潰，而 【窗口占用內存】 包含了瀏覽器自身的部分，具體看電腦配置能承受多少，比如Mac筆記本，【窗口占用內存】18G，【JavaScript使用的內存】1.7G瀏覽器依然能承受，小卡頓，多次測試結果為【JavaScript使用的內存】1.8G的時候崩潰。一般配置的電腦(注意考慮的是用戶群體)【窗口占用內存】1G多久會明顯卡頓，所以當你項目遇到卡頓問題時候，請查看此項，另外還可以用瀏覽器打印堆棧內存快照，會發現閉包數量驚人，高達上百萬，這說明已經存在較為嚴重的內存泄漏問題

該問題最終的解釋可能如還未發布的VUE 3+ 修復說明，下圖：

此前接手一個項目，各種折騰各種嘗試，花了一個多月，雖優化了一部分寫法，翻遍很多網站，類似問題也很多，但沒有一個靠譜的方案，最后解決方案(只花了一個周，也就每個頁面拆除一個入口js文件)：把路由去掉，把單頁面入口打包改成了每個頁面(原路由對應頁面)一個入口打包(即是每個頁面都對應了一個html,和相關的VUE依賴包)，每次點擊導航菜單是都在界面插入一個iframe，并打開對應界面，這樣不僅能避免了頁面組件過多的銷毀-渲染，模擬成了瀏覽器多窗口模式，對于很多后臺管理系統，也滿足了多頁面切換不刷新保存條件的需求，也能在改造過程中發現了代碼拆分、移植時，哪些寫法比較阻礙進度，對優化代碼有一定幫助。

針對上述改造方案打包需要注意的就是解決node服務內存問題，默認32位系統0.7G左右，64位系統1.4G左右，多入口打包導致node運行內存需求較大，針對vue-cli 3+的，只需要找到node_modules/@vue/cli-service/bin/vue-cli-service.js ,頂部有行代碼 #!/usr/bin/env node ，在其后面手動添加 --max_old_space_size=4096 ， 4096自行修改，即node服務能占用的最大內存，針對vue-cli 3以上，很多網友使用插件什么寫入配置的存在問題，--max_old_space_size=4096后面幾項是下劃線，遇到插件寫入中杠的無效，本方法親測結果。

希望對現有VUE項目遇到內存泄漏問題的朋友提供改造幫助。

總結

以上是生活随笔為你收集整理的linux vue node占用内存过大,vue 大型应用内存泄漏改造经验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。