在缩小期间排除调试 JavaScript 代码

IT技术 javascript compression minify google-closure-compiler
2021-03-03 14:06:41

我正在寻找不同的方法来缩小我的 JavaScript 代码,包括常规的JSMin、 Packer 和YUI解决方案。我对新的Google Closure Compiler非常感兴趣,因为它看起来非常强大。

我注意到Dean Edwards Packer有一个功能可以排除以三个分号开头的代码行。这对于排除调试代码很方便。例如:

;;;     console.log("Starting process");

我花了一些时间清理我的代码库,并希望添加这样的提示以轻松排除调试代码。为此,我想弄清楚这是否是最佳解决方案,或者是否有其他技术。

因为我还没有选择如何缩小,我想以一种与我最终使用的任何缩小器兼容的方式清理代码。所以我的问题是:

  1. 使用分号是一种标准技术,还是有其他方法可以做到?

  2. Packer 是唯一提供此功能的解决方案吗?

  3. 其他解决方案是否也可以采用这种方式工作,或者他们是否有其他方法来实现这一点?

  4. 我可能最终会开始使用 Closure Compiler。我现在应该做些什么来为此做好准备?

6个回答

这是闭包编译器的(最终)答案:

/** @const */
var LOG = false;
...
LOG && log('hello world !'); // compiler will remove this line
...

这甚至可以使用SIMPLE_OPTIMIZATIONS并且没有--define=必要!

对于任何对如何进行这项工作感到困惑的人,这里有一个简单的方法:1)/** @const */ var LOG = false;在顶部,在关闭设置之后,在代码之前。2)在您的代码中查找/更改console.logLOG&&console.log编译器将删除所有 console.log 调用。但是,对我来说,这只适用于“ADVANCED_OPTIMIZATIONS”模式
2021-04-19 14:06:41
这听起来非常有用。但是在onlineclosure-compiler page和local上测试没有效果。
2021-04-22 14:06:41
@hellectron 实际上它确实有效,您只需要将所有代码放在一个闭包中,否则编译器会认为它是一个全局变量,并且不会将其剥离。无论如何,这可能是最好的,这样您就不会将任何“使用严格”语句全球化
2021-04-29 14:06:41
与使用传统方法不同,此方法的一个很大缺点console.log()是,LOG=true开发工具中报告的行号log()是定义此函数的位置,而不是调用它的位置。因此,所有消息都被报告为在同一行上,而不是它们发生的位置。考虑到消息的行号通常是调试的关键,这是非常不理想的。
2021-05-02 14:06:41
这个答案应该在顶部。一个好处是,在高级模式下,该log函数将被剥离为死代码。
2021-05-09 14:06:41

这是我与 Closure Compiler 一起使用的内容。首先,您需要像这样定义一个 DEBUG 变量:

/** @define {boolean} */
var DEBUG = true;

它使用 JS 注释进行闭包,您可以在文档中阅读

现在,只要您需要一些仅用于调试的代码,只需将其包装在 if 语句中,如下所示:

if (DEBUG) {
  console.log("Running in DEBUG mode");
}

在编译发布代码时,添加以下编译命令:--define='DEBUG=false'-- 调试语句中的任何代码都将完全排除在编译文件之外。

不要错过注释 '/** @define {boolean} */',没有它就无法工作。
2021-04-24 14:06:41

在这种情况下,一个好的解决方案可能是支持“条件编译”的js-build-tools

简而言之,您可以使用注释,例如

// #ifdef debug
var trace = debug.getTracer("easyXDM.Rpc");
trace("constructor");
// #endif

您可以在其中定义 pragma,例如debug.

然后在构建它时(它有一个蚂蚁任务)

//this file will not have the debug code
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.js"/>
//this file will        
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.debug.js" defines="debug"/>

向代码中记录到控制台的每个位置添加逻辑会使调试和维护变得更加困难。

如果您已经打算为您的生产代码添加一个构建步骤,您始终可以在顶部添加另一个文件,将您的console方法转换为noop's。

就像是:

console.log = console.debug = console.info = function(){};

理想情况下,您只需删除任何console方法,但如果您无论如何都保留它们但不使用它们,这可能是最容易使用的。

如果您在高级模式下使用闭包编译器,您可以执行以下操作:

if (DEBUG) console.log = function() {}

然后编译器将删除所有的 console.log 调用。当然你需要命令行中--define的变量DEBUG

但是,这仅适用于高级模式如果您使用的是简单模式,则需要对源文件运行预处理器。

为什么不考虑 Dojo Toolkit?它具有内置的基于注释的编译指示,可根据构建包含/排除代码段。另外,它与高级模式下的闭包编译器兼容(见下面的链接)!

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t