【性能】console.log引起内存泄漏

news2025/1/14 2:47:48

如下代码中的console.log会引起内存泄漏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h2 @click="handleClick">可点击文字</h2>
  </div>

  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClick() {
          const arr = new Array(100000).fill(0)
          console.log(arr);
        }
      }
    });
  </script>
</body>

</html>

原本在函数执行完毕后会销毁arr，但是控制台的打印保持了对arr的引用，从而造成内存泄漏。

通过控制台的Performance可以清晰观察垃圾回收过程。

未使用console.log

在这里插入图片描述
分析图中趋势

使用console.log

在这里插入图片描述

如果大量使用console.log，会造成更多的垃圾无法正常回收。

如果不打开控制台，不同的浏览器会有不同的处理方式，Chrome不打开控制台则不会引起内存泄漏，safari则不然。所以生产环境中尽可能不适用console.log，以免造成不必要的内存泄漏。

删除所有console.log的插件

手动删除console.log太过繁琐，且开发环境中依赖打印，通过terser可以实现。

webpack中使用terser

webpack中内置了terser

module.exports = defineConfig({
	transpileDependencies:true,
	terser: {
		terserOptions: {
			drop_console: true, 
			drop_debugger: true,
		},
	},	
})

vite中使用terser

terser还有一些其他配置如混淆变量名等

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        passes: 2 // 压缩的次数，默认是 1
      },
      mangle: {
        properties: {
          regex: /^_/ // 混淆所有以下划线开头的属性名
        }
      },
      format: {
        comments: false // 移除所有注释
      }
    }
  }
});