js、css、html压缩与混淆：页面加速防止被抄袭

2021-08-1907:15:25WEB前端开发Comments2,983 views字数 2158阅读模式

背景

前段时间针对某件大事件，我们用之前的一个老原生html项目，涂涂改改快速做了一个h5，由于时间紧迫直接上线了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

结果没想到。。。。第二天就被某大公司抄袭了。。。调了点颜色、改了些文案就直接抄袭并上线了。。。连我们变量名都没改。。。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

后来我们快速对项目代码进行了压缩和混淆，才避免了后续迭代没有被抄袭。。。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

整件事说起来又气又搞笑。。。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

经过这件事，我汇总了一下js、css、html压缩与混淆，增加页面加载速度的同时，还能防止页面被抄袭文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

js混淆

js混淆，其实就是将你的js代码弄的晦涩难懂，达到了防抄袭的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

业界比较常用的是javascript-obfuscator这个库文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

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())

这段代码就是将一段简单的加法运算代码进行了混淆，最后结果是文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

分析一下你会发现，其实多了一个字典，所有方法变量，都有存在字典中，调用时先调用字典还原方法名变量再执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

js压缩

压缩以前用的最多的是uglifyjs，现在用的比较多的是terser文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

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)

压缩后结果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

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

将所有参数都变成了一个字符，所有能缩减的空间都去掉了，转化成一行代码，最大限度节省代码体积文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

css压缩

css压缩，我用的clean-css，当然业界也有很多优秀的css处理插件比如PostCSS，但这里我简单介绍一下clean-css的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

    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)

压缩后的结果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

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

html压缩

现在业界最常用的html压缩插件是html-minifier，功能很强大，还能压缩html中的js和css，直接上代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

我们压缩一段有html、js、css的代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

执行压缩的代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

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)

压缩结果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22079.html

<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>