关于javascript:小蝌蚪传记jscsshtml压缩与混淆汇总

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

独身三十年，酷爱用双手解决问题

白天用双手敲代码

早晨用双手做一些正能量的事件

双手终于不堪重负，于是去医院查看

医生问：你有女朋友吗

小蝌蚪伸出双手：这就是

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

小蝌蚪豁然开朗

于是下载某同城交友软件

约了两个妹纸见面

第一个妹纸

网名叫：水冰月

个人简介：“洳淉芣嬡莪，僦芣婹傷嗐莪”

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

受了男人的伤，从此封心不再爱

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

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

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

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

300 多斤的水冰月，大象腿

一副被沙枪打过的脸蛋

衣着美少女兵士的 jk 装

半露着瘦小的肚皮

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

水冰月：正是

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

水冰月：小哥哥好风趣

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

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

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

小蝌蚪强忍慌张：妳当初为何来到葬爱家族

水冰月：因为家族大公爵秃顶了，头发象征着权力，我的信奉崩塌了

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

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

而后邪魅的看向小蝌蚪

小蝌蚪感觉不妙，想要逃

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

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

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

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

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

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

网名叫：“初恋”

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

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

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

人类高质量女性

所到之处，有数男人侧目

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

口服六味地黄丸

五菱红光车钥匙摆桌上

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

开启超级舔狗模式

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

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

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

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

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

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

初恋：人家明天情绪不好，你能哄我开心吗

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

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

初恋终于笑了：欢送你走上这条爱我的不归路

小蝌蚪：请妳当初、立即、马上捉弄我的感情

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

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

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

小蝌蚪：啊？

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

小蝌蚪一脸懵逼

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

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

看着兰博基尼远去的尾灯

小蝌蚪在风中凌乱

回到公司，小蝌蚪每天以泪洗面，双目无神、酒囊饭袋

一位男同事，为了帮忙他走出暗影

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

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

一起探讨 react 源码、js 高级程序设计

一起手牵手，结对编程

人类最高级的精力共鸣，往往只会产生在两个男人萍水相逢的怦然心动

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

一瞬间，小蝌蚪想通了

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

可是女朋友为什么肯定要是女的呢

人类的先人

喜爱大长腿，是因为有利于奔跑

喜爱大粗臀，是因为有利于孕育

喜爱那个大，是因为有利于哺乳

抛开这所有生物本能，而投向男性广阔的怀抱

才是最完美无瑕的爱恋

才是最高级的灵魂符合

小蝌蚪和男同事紧紧相拥

爱抚着他的胸毛

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

那天早晨，小蝌蚪带他去找了妈妈

他们从此过上了幸福快乐的生存

完

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

前段时间针对某件大事件，咱们用之前的一个老原生 html 我的项目，涂涂改改疾速做了一个 h5，因为工夫紧迫间接上线了

后果没想到。。。。第二天就被某大公司剽窃了。。。调了点色彩、改了些文案就间接剽窃并上线了。。。连咱们变量名都没改。。。

起初咱们疾速对我的项目代码进行了压缩和混同，才防止了后续迭代没有被剽窃。。。

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

通过这件事，我汇总了一下 js、css、html 压缩与混同，减少页面加载速度的同时，还能避免页面被剽窃

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

这段代码就是将一段简略的加法运算代码进行了混同，最初后果是

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

压缩以前用的最多的是 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 压缩，我用的 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-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：第一名的小蝌蚪

关于javascript:小蝌蚪传记jscsshtml压缩与混淆汇总

《小蝌蚪传记》

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

背景

js 混同

js 压缩

css 压缩

html 压缩

结尾