小蝌蚪传记：js、css、html压缩与混淆汇总

《小蝌蚪传记》

小蝌蚪，男，低级前端工程师

单身三十年，热爱用双手解决问题

白天用双手敲代码

晚上用双手作一些正能量的事情

双手终于不堪重负，因而去医院检查

医生问：你有女友吗

小蝌蚪伸出双手：这就是

医生叹气说：你须要找到一个真正的女友，减小没必要要的重复劳动，解放双手

小蝌蚪恍然大悟

因而下载某同城交友软件

约了两个妹纸见面

第一个妹纸

网名叫：水冰月

我的简介：“洳淉芣嬡莪，僦芣婹傷嗐莪”

传说她是葬爱家族大公爵前女朋友

受了男人的伤，今后封心再也不爱

现在想找个平凡人，度过平凡的下半生

她的头像是一位绝美的忧郁女神

无敌侧颜，万千少男的梦想

但是见面的时候，小蝌蚪被她的巨颜童乳惊呆

300多斤的水冰月，大象腿

一副被沙枪打过的脸蛋

穿着美少女战士的jk装

半露着肥大的肚皮

小蝌蚪：您是“水冰月”？

水冰月：正是

小蝌蚪：妳是美少女壮士吧

水冰月：小哥哥好幽默

小蝌蚪点开她的头像，反复确认：阿姨，您别闹好么

水冰月打开美颜相机，调成十级美颜：看！多美啊，这就是我，葬爱家族第一女皇，惟一的真神

小蝌蚪万念俱灰，双眼迷离

小蝌蚪强忍镇静：妳当初为什么离开葬爱家族

水冰月：由于家族大公爵秃顶了，头发象征着权利，个人信仰崩塌了

小蝌蚪：那你接下来什么打算

水冰月：我要找到一个男士，和他一块儿传承我优秀的基因

而后邪魅的看向小蝌蚪

小蝌蚪感受不妙，想要逃

被水冰月蠕动的肚皮，si亡缠绕

慌乱之中小蝌蚪露出了胸前小猪佩奇纹身

水冰月大惊失色，小蝌蚪跳窗逃亡

小蝌蚪心态大崩，找个女友，竟如此凶险

放弃之际，禅师托梦鼓励到：每当你低迷的时候，记住，你曾是第一名的小蝌蚪

小蝌蚪振做精神，又约了一个妹纸

网名叫：“初恋”

见面时，小蝌蚪被她的绝世神颜惊呆。。。

初恋背着lv包包，手戴百达翡丽表

0.618黄金比例身材，发型大波浪

人类高质量女性

所到之处，无数男人侧目

小蝌蚪见状，赶忙涂抹大宝SOD蜜

口服六味地黄丸

五菱红光车钥匙摆桌上

珍藏版红星尔克男鞋擦的铮亮

开启超级舔狗模式

初恋坐下，深情款款看着小蝌蚪：我最近受了心伤，想找个老实人接盘，请问你是老实人吗

小蝌蚪：国家一级老实人、后厂村天才舔狗、昌平区第一备胎，就是我

初恋：我有100个前男朋友，脚踏100只船，你还会爱我吗

小蝌蚪：我会将他们一一战胜，由于我是第一名的小蝌蚪

初恋：我爱好出轨，喜欢给男友戴绿色的帽子

小蝌蚪：宝贝怕我冷，因此P腿给我戴帽子、送温暖，更加爱妳了

初恋：人家今天心情很差，你能哄我开心吗

小蝌蚪表演了一段舌头碎大石

而后用100根胸毛，开启多线程，在桌子上刻了一版react源码

初恋终于笑了：欢迎你走上这条爱个人不归路

小蝌蚪：请妳如今、马上、立刻玩弄个人感情

小蝌蚪彻底迷失了心智，被热恋冲晕头脑

就在这时，一位开着兰博基尼的高富帅路过

初恋看了一眼，回头对小蝌蚪说：咱们分手吧

小蝌蚪：啊？

初恋：我爱上了别人，再见

小蝌蚪一脸懵逼

初恋起身勾搭高富帅：我最近受了点心伤，请问你是老实人吗

高富帅：请上个人车，我给您展现我是如何老实的

看着兰博基尼远去的尾灯

小蝌蚪在风中凌乱

回到公司，小蝌蚪天天以泪洗面，双目无神、行尸走肉

一位男同事，为了帮助他走出阴影

天天给小蝌蚪端茶倒水吃零食

每晚陪小蝌蚪搬砖加班到深夜

一块儿讨论react源码、js高级程序设计

一块儿手牵手，结对编程

人类最高级的精神共鸣，每每只会发生在两个男人不期而遇的怦然心动

不知不觉，小蝌蚪靠在了他的肩

一瞬间，小蝌蚪想通了

找女友，是为了寻求心灵的慰藉和生理上的知足

但是女友为何必定要是女的呢

人类的祖先

喜欢大长腿，是由于有利于奔跑

喜欢大粗臀，是由于有利于孕育

喜欢那个大，是由于有利于哺乳

抛开这一切生物本能，而投向男性宽广的怀抱

才是最完美无瑕的爱恋

才是最高级的灵魂契合

小蝌蚪和男同事牢牢相拥

爱抚着他的胸毛

享受着超凡脱俗的灵魂快感

那天晚上，小蝌蚪带他去找了妈妈

他们今后过上了幸福快乐的生活

完

更多小蝌蚪传记，欢迎关注 github：第一名的小蝌蚪

《js、css、html压缩与混淆汇总》

背景

前段时间针对某件大事件，咱们用以前的一个老原生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的混淆我直接抽出来单独作了

结尾

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

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

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

更多技术文章，欢迎关注 github：第一名的小蝌蚪