console.log导致的内存泄漏

问题描述

在平时开发中，我们经常使用console.log()来打印一些数据，在开发环境里边其实没啥太大的问题，但是呢在生产环境里边，一定要把这些打印语句去掉，不然的话，除了会暴露一些开发过程中的一些中间信息之外，还会造成内存泄漏。

请看下面代码示例：

vue

<template>
  <button @click="handleClick">Click me !</button>
</template>

<script setup>

const handleClick = () => {
  const arr = new Array(100000).fill(0);
  console.log(arr);
}
</script>

上面的代码中，我们点击按钮的时候，会创建一个长度为100000的数组，然后使用console.log()打印出来，然后我们点击按钮多次，会发现内存占用会一直增加，直到浏览器崩溃为止。

这是因为console.log()会将数据存储在内存中，而不会自动释放，所以当数据量过大时，就会导致内存泄漏。

解决办法

console.table()

使用console.table()代替console.log()，console.table()会将数据以表格的形式打印出来，不会占用太多内存。

terser

这个插件是做代码压缩和混淆的工具，同时也可以帮助我们移除源代码中的console.log()语句。

当然，这个工具的使用要看工程使用的是vue2还是vue3，因为vue2默认的打包工具是webpack，webpack是内置了terser的。而vue3默认的打包工具是vite，是没有内置terser的，需要手动配置。下面是不同环境中配置terser的方法：

vue2

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  terser: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

vue3

在配置之前，首先要安装一下terser插件：

bash

npm install terser --save-dev

然后，在vite.config.js中配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

参考地址

抖音 - 渡一Web前端学习频道 - console.log导致的内存泄漏

console.log导致的内存泄漏 ​

问题描述 ​

解决办法 ​

console.table() ​

terser ​

vue2 ​

vue3 ​