一、背景和意义
前端JavaScript发布时，一般要对代码进行压缩。在做代码压缩时，可以考虑增加一些额外的操作，比如移除测试与调试使用的代码，补充必要的日志信息等。这些操作可以通过修改js语法树实现，文本以uglify-js为示例实现JavaScript语法树修改操作。
二、压缩代码时移除debug日志
console.debug打印的日志一般仅在本地调试时使用，发布之后可以考虑移除，以避免日志太多。这里给出一个示例代码：
JavaScript
const uglifyjs = require("uglify-js");
// 将某个字符串从startPos到endPos之间的内容替换为replacement参数的内容
function spliceString(str, startPos, endPos, replacement) {
return str.substr(0, startPos) + replacement + str.substr(endPos);
}
// 替换代码，做移除调试代码等操作
function replaceCode(code) {
const nodes = [];
uglifyjs.parse(code).walk(new uglifyjs.TreeWalker(node => {
if (node instanceof uglifyjs.AST_Call
&& node.expression.print_to_string().endsWith('console.debug')) {
nodes.push(node);
}
}));
for (let i = nodes.length; --i >= 0;) {
const node = nodes[i];
code = spliceString(code, node.start.pos, node.end.endpos, "");
}
return code;
}
// 被用于测试的JS代码
const func = `
function helloWorld() {
console.debug("helloWorld arguments: ", arguments);
console.log("helloWorld");
}
helloWorld();
`;
const revisedCode = replaceCode(func);
console.log("修改语法树之后的代码:\n", revisedCode);
console.log("压缩之后的代码:\n", uglifyjs.minify(revisedCode).code);上述代码保存为文件compress.js，然后运行如下命令安装uglify-js依赖（需要先安装nodejs）：
bash
npm install uglify-js再运行compress.js文件：
bash
node compress.js运行结果如下：
可以看到，console.debug调用被删掉了。
三、压缩代码时给日志操作增加时间输出
console.log等日志操作不打印时间，如果想修改console.log等方法的调用代码，增加时间输出以方便了解各个日志的触发时间，这也可以通过uglify-js实现。将前面的compress.js代码修改为：
JavaScript
const uglifyjs = require("uglify-js");
// 将某个字符串从startPos到endPos之间的内容替换为replacement参数的内容
function spliceString(str, startPos, endPos, replacement) {
return str.substr(0, startPos) + replacement + str.substr(endPos);
}
// 解析一段指定的JavaScript代码，并遍历其中的语法树节点
function parseAndTraverseNode(codeStr, handler) {
uglifyjs.parse(codeStr).walk(new uglifyjs.TreeWalker(handler));
}
// 替换代码，做移除调试代码等操作
function replaceCode(code) {
// 将"new Date()"这一段代码转换成语法树对象，后面要用到
let newDateNode = null;
parseAndTraverseNode("`${new Date()}: `", n => {
if (!(n instanceof uglifyjs.AST_Toplevel || n instanceof uglifyjs.AST_SimpleStatement)
&& newDateNode === null) {
newDateNode = n;
}
});
const nodes = [];
parseAndTraverseNode(code, node => {
if (node instanceof uglifyjs.AST_Call) {
const nodeStr = node.expression.print_to_string();
const startPos = node.start.pos;
const endPos = node.end.endpos;
if (nodeStr.endsWith('console.debug')) {
nodes.push({replacement: "", startPos, endPos});
} else if (nodeStr.match(/console\.(log|info|warn|error)+$/)) {
// 在console.log、console.warn等方法调用增加一个new Date()入参
node.args.unshift(newDateNode);
replacement = node.print_to_string({ beautify: true });
nodes.push({replacement, startPos, endPos});
}
}
});
for (let i = nodes.length; --i >= 0;) {
const node = nodes[i];
code = spliceString(code, node.startPos, node.endPos, node.replacement);
}
return code;
}
// 被用于测试的JS代码
const func = `
function helloWorld() {
console.debug("helloWorld arguments: ", arguments);
console.log("helloWorld");
}
helloWorld();
`;
const revisedCode = replaceCode(func);
console.log("原始代码:\n", func);
console.log("修改语法树之后的代码:\n", revisedCode);
console.log("压缩之后的代码:\n", uglifyjs.minify(revisedCode).code);运行结果如下：
可以看到，console.log("helloWorld")调用在最前面插入了一个new Date()，其他参数往后移。
四、移除单元测试代码
假设约定所有单元测试函数名以UnitTest结尾，在压缩代码时，可以移除这些单元测试函数以及对这些函数的调用，将前面的compress.js代码修改为：
JavaScript
const uglifyjs = require("uglify-js");
// 将某个字符串从startPos到endPos之间的内容替换为replacement参数的内容
function spliceString(str, startPos, endPos, replacement) {
return str.substr(0, startPos) + replacement + str.substr(endPos);
}
// 解析一段指定的JavaScript代码，并遍历其中的语法树节点
function parseAndTraverseNode(codeStr, handler) {
uglifyjs.parse(codeStr).walk(new uglifyjs.TreeWalker(handler));
}
// 替换代码，做移除调试代码等操作
function replaceCode(code) {
// 将"new Date()"这一段代码转换成语法树对象，后面要用到
let newDateNode = null;
parseAndTraverseNode("`${new Date()}: `", n => {
if (!(n instanceof uglifyjs.AST_Toplevel || n instanceof uglifyjs.AST_SimpleStatement)
&& newDateNode === null) {
newDateNode = n;
}
});
const nodes = [];
parseAndTraverseNode(code, node => {
const startPos = node.start.pos;
const endPos = node.end.endpos;
if (nodes.filter(i => i.startPos <= startPos && i.endPos >= endPos).length > 0) {
return; // 如果前面的某一个节点的替换操作已经覆盖了当前节点，那么当前节点就不需要再处理
}
if (node instanceof uglifyjs.AST_Call) {
const nodeStr = node.expression.print_to_string();
if (nodeStr.endsWith('console.debug') || nodeStr.endsWith("UnitTest")) {
nodes.push({replacement: "", startPos, endPos});
} else if (nodeStr.match(/console\.(log|info|warn|error)+$/)) {
// 在console.log、console.warn等方法调用增加一个new Date()入参
node.args.unshift(newDateNode);
replacement = node.print_to_string({ beautify: true });
nodes.push({replacement, startPos, endPos});
}
} else if (node instanceof uglifyjs.AST_Defun) {
if (node.name?.name?.endsWith("UnitTest")) {
nodes.push({replacement: "", startPos, endPos});
}
}
});
for (let i = nodes.length; --i >= 0;) {
const node = nodes[i];
code = spliceString(code, node.startPos, node.endPos, node.replacement);
}
return code;
}
// 被用于测试的JS代码
const func = `
function helloWorld() {
console.debug("helloWorld arguments: ", arguments);
console.log("helloWorld");
}
function round2UnitTest(n) { /* 对一个数进行四舍五入操作，保留两位小数 */
const ret = Math.round(n * 100) / 100;
console.log("round2UnitTest input:", n, ", result:", ret);
}
helloWorld();
round2UnitTest(1.5379);
`;
const revisedCode = replaceCode(func);
console.log("原始代码:\n", func);
console.log("修改语法树之后的代码:\n", revisedCode);
console.log("压缩之后的代码:\n", uglifyjs.minify(revisedCode).code);运行结果如下：
可以看到，round2UnitTest函数及其调用都被移除掉了。