vue 大型應用內存泄漏改造經驗

VUE項目內存泄漏：
場景1：頁面結構複雜，內嵌子組件數量較多
場景2：高頻使用（切換路由致使頁面組件銷燬建立過多）
結果：頁面卡頓且瀏覽器窗口占用內存較高

檢測：

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

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

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

圖片內容來源：https://mp.weixin.qq.com/s/2y...

此前接手一個項目，各類折騰各類嘗試，花了一個多月，雖優化了一部分寫法，翻遍不少網站，相似問題也不少，但沒有一個靠譜的方案，最後解決方案（只花了一個周，也就每一個頁面拆除一個入口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項目遇到內存泄漏問題的朋友提供改造幫助。