js、css、html压缩与混淆汇总-技术圈

作者：第一名的小蝌蚪

来源：SegmentFault 思否社区

背景

前段时间针对某件大事件，我们用之前的一个老原生html项目，涂涂改改快速做了一个h5，由于时间紧迫直接上线了

结果没想到。。。。第二天就被某大公司抄袭了。。。调了点颜色、改了些文案就直接抄袭并上线了。。。连我们变量名都没改。。。

后来我们快速对项目代码进行了压缩和混淆，才避免了后续迭代没有被抄袭。。。

整件事说起来又气又搞笑。。。

经过这件事，我汇总了一下js、css、html压缩与混淆，增加页面加载速度的同时，还能防止页面被抄袭

js混淆

js混淆，其实就是将你的js代码弄的晦涩难懂，达到了防抄袭的效果

业界比较常用的是javascript-obfuscator这个库

const JO = require("javascript-obfuscator");
const code = `
        function add(first, second) { return first + second; }; 
        var v = add(1,2); 
        console.log(v);
`;
const result = JO.obfuscate(code,
    {
      compact: false,
      controlFlowFlattening: true,
      controlFlowFlatteningThreshold: 1,
      numbersToExpressions: true,
      simplify: true,
      shuffleStringArray: true,
      splitStrings: true,
      stringArrayThreshold: 1,
    }
  );
console.log("混淆结果：", result.getObfuscatedCode())

这段代码就是将一段简单的加法运算代码进行了混淆，最后结果是

分析一下你会发现，其实多了一个字典，所有方法变量，都有存在字典中，调用时先调用字典还原方法名变量再执行

js压缩

压缩以前用的最多的是uglifyjs，现在用的比较多的是terser

const { minify } = require("terser");
const code = `
        function add(first, second) { return first + second; }; 
        var v = add(1,2); 
        console.log(v);
`;
const result = await minify(code);
console.log("压缩结果：", result.code)

压缩后结果如下：

function add(d,n){return d+n}var v=add(1,2);console.log(v);

将所有参数都变成了一个字符，所有能缩减的空间都去掉了，转化成一行代码，最大限度节省代码体积

css压缩

css压缩，我用的clean-css，当然业界也有很多优秀的css处理插件比如PostCSS，但这里我简单介绍一下clean-css的用法

const CleanCSS = require('clean-css');
    const input = `
        a { 
            font-weight:bold; 
        }
        .vb {
            border: 1px silid red;
        }
    `;
    const options = { /* options */ };
    const output = new CleanCSS(options).minify(code);
    console.log("压缩结果：", output.styles)

压缩后的结果如下：

a{font-weight:700}.vb{border:1px silid red}

html压缩

现在业界最常用的html压缩插件是html-minifier，功能很强大，还能压缩html中的js和css，直接上代码

我们压缩一段有html、js、css的代码

执行压缩的代码如下:

const htmlMinify = require("html-minifier").minify
const result = htmlMinify(htmlCode, {
        minifyCSS: true,// 压缩css
        minifyJS: true,// 压缩js
        collapseWhitespace: true,// 删除html里的空格 达到html的压缩
        removeAttributeQuotes: true,// 尽可能删除html标签里的双引号 达到html的压缩
        removeComments: true, //删除html中的注释
        removeCommentsFromCDATA: true, //从脚本和样式删除的注释
    });
console.log("压缩结果：", result)

压缩结果如下：

<html><head><style>a{font-weight:700}.vb{border:1px silid red}</style></head><body><div class=foreword>小蝌蚪，嘻嘻</div><script type=text/javascript>function add(d,n){return d+n}var v=add(1,2);console.log(v)</script></body></html>

通过设置对应的配置项minifyCSS和minifyJS，我们直接把html、js、css一起进行了压缩，非常方便

唯一遗憾的是，好像html-minifier不支持js的混淆，所以js的混淆我直接抽出来单独做了

结尾

通过抄袭的这件事，反射出了我们团队上线流程的不规范

但对于被其他团队抄袭这种行为，也只能在这里道德谴责一下，发发牢骚

就当是吃一堑长一智吧，嘻嘻

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，扫描下方”二维码“或在“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -