webpack 泄露 vue源码泄露_vue单页应用的内存泄露定位和修复问题小结_vue.js

在前端项目(PC端)中，内存泄露的定位往往比修复更加困难，即使google浏览器有提供Memory工具，但是面对成千上万的元素和错综复杂的引用关系，开发则依然很难快速定位到问题代码块。

一、什么是内存泄漏？

系统进程不再用到的内存，没有及时释放，就叫做内存泄漏(memory leak)。当内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。Chrome限制了浏览器所能使用的内存极限(64位为，32位为)，这也就意味着浏览器将无法直接操作一些大内存对象。

V8引擎在执行垃圾回收时会阻塞 JavaScript应用逻辑，直到垃圾回收结束再重新执行JavaScript应用逻辑，这种行为被称为“全停顿”(stop-the-world)。 若V8的堆内存为，V8做一次小的垃圾回收需要50ms以上，造成假死现象。

二、JS内存管理和垃圾回收机制GC

高级语言基本都有垃圾回收机制(garbage collection)自动管理内存，降低程序员的负担，以达到解决内存泄漏的目的，但是不允许人为手动触发，无法对内存管理进行任何干预。

老版本的浏览器使用引用计数法(Reference Counting)来管理内存，即每次引用加一，被释放时减一，当这个值的引用次数变成 0 时，就可以将其内存空间回收，缺点是循环引用时无法回收。

现代浏览器基本采用标记清除法(Mark-and-Sweep)来管理内存，即浏览器周期性地从某个根元素(譬如 window 对象)开始找引用变量，及这些变量引用的变量，这样