在前端开发的过程中，开发者会经常使用 console.log 和 debugger 进行调试。然而，在将代码打包后，这些调试语句可能会对性能造成负面影响。本文介绍如何通过 webpack 去除打包后的 console.log 和 debugger。
去除 console.log
方法一：手动移除
最简单的方法是手动在代码中搜索并且移除所有的 console.log。这一做法虽然耗时耗力，但是会确保所有的 console.log 都被移除。
方法二：使用 babel-plugin-transform-remove-console
babel 可以通过插件对代码进行转义。babel-plugin-transform-remove-console 是一个能够去除 console.log 的 babel 插件。首先需要安装该插件：
npm install babel-plugin-transform-remove-console -D
然后在 babel 配置文件中添加该插件：
{
"plugins": [
"transform-remove-console"
]
}这样就可以在打包后去除所有的 console.log。
去除 debugger
方法一：使用 babel-plugin-transform-remove-debugger
和上面去除 console.log 的方法类似，也可以使用 babel-plugin-transform-remove-debugger 插件来去除 debugger。首先需要安装该插件：
npm install babel-plugin-transform-remove-debugger -D
然后在 babel 配置文件中添加该插件：
{
"plugins": [
"transform-remove-debugger"
]
}这样就可以在打包后去除所有的 debugger。
方法二：使用 UglifyJSPlugin
UglifyJSPlugin 是一个用于压缩 JavaScript 代码的 webpack 插件。除了压缩 JavaScript 代码，UglifyJSPlugin 还可以去除代码中的 debugger，可以在 webpack 配置文件中添加该插件：
-- -------------------- ---- -------
----- -------------- - ----------------------------------
-------------- - -
-------- -
--- ----------------
-------------- -
-- -- --------
--------- -
-------------- -----
--
--
--
-
-这样就可以在打包后去除所有的 debugger。
总结
通过去除 console.log 和 debugger，可以减小打包后代码的体积，并且提高代码在浏览器中的运行效率。在实际生产环境中，建议将这些调试语句去除，以提高应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afec8948841e9894c2736d