小蝌蚪傳記：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：第一名的小蝌蚪