ES6編寫前端程式碼壓縮混淆

阿新 • • 發佈：2022-04-15

做法

核心 JS 程式碼 webpack
其他程式碼html css lib程式碼 Gulp

核心ES程式碼合併成一個壓縮混淆

webpack.config.js

const path = require('path'); //Node.js內建模組
const JavaScriptObfuscator  = require('webpack-obfuscator');

module.exports = {
  entry: './Myjs/index.js',  //配置檔案入口
  output: { 
    filename: 'index.js',    //輸出檔案
    path: path.resolve(__dirname, './dist')  //輸出路徑
  },
  plugins: [
    new JavaScriptObfuscator({
      compact: true,//壓縮程式碼
      controlFlowFlattening: true,//是否啟用控制流扁平化(降低1.5倍的執行速度)
      controlFlowFlatteningThreshold: 1,//應用概率;在較大的程式碼庫中，建議降低此值，因為大量的控制流轉換可能會增加程式碼的大小並降低程式碼的速度。
      deadCodeInjection: true,//隨機的死程式碼塊(增加了混淆程式碼的大小)
      deadCodeInjectionThreshold: 1,//死程式碼塊的影響概率
      debugProtection: true,//此選項幾乎不可能使用開發者工具的控制檯選項卡
      //debugProtectionInterval: true,//如果選中，則會在“控制檯”選項卡上使用間隔強制除錯模式，從而更難使用“開發人員工具”的其他功能。
      disableConsoleOutput: true,//通過用空函式替換它們來禁用console.log，console.info，console.error和console.warn。這使得偵錯程式的使用更加困難。
      identifierNamesGenerator: 'hexadecimal',//識別符號的混淆方式 hexadecimal(十六進位制) mangled(短識別符號)
      log: false,
      renameGlobals: true,//是否啟用全域性變數和函式名稱的混淆
      rotateStringArray: true,//通過固定和隨機（在程式碼混淆時生成）的位置移動陣列。這使得將刪除的字串的順序與其原始位置相匹配變得更加困難。如果原始原始碼不小，建議使用此選項，因為輔助函式可以引起注意。
      selfDefending: true,//混淆後的程式碼,不能使用程式碼美化,同時需要配置 cpmpat:true;
      stringArray: true,//刪除字串文字並將它們放在一個特殊的陣列中
      //stringArrayEncoding: 'rc4',
      seed:true, // 預設情況下（seed = 0），每次混淆程式碼時都會得到一個新結果（即：不同的變數名，插入stringArray的不同變數等）。如果需要可重複的結果，請將種子設定為特定的整數。
      stringArrayThreshold: 1,
      transformObjectKeys: true,// 轉換（混淆）物件鍵。例如，此程式碼var a = {enabled：true};使用此選項進行模糊處理時，將隱藏已啟用的物件鍵：var a = {};a [_0x2ae0 [（'0x0'）] = true;。 理想情況下與String Array設定一起使用。
      stringArrayEncoding: ['base64'], // 此選項可能會略微降低指令碼速度。使用Base64或RC4對stringArray的所有字串文字進行編碼，並插入一個特殊的函式，用於在執行時將其解碼回來。
      target: 'browser', // 您可以將混淆程式碼的目標環境設定為以下之一： Browser 、Browser No Eval 、Node 目前瀏覽器和節點的輸出是相同的。
      unicodeEscapeSequence: true, // 將所有字串轉換為其unicode表示形式。例如，字串“Hello World！”將被轉換為“'\ x48 \ x65 \ x6c \ x6c \ x6f \ x20 \ x57 \ x6f \ x72 \ x6c \ x64 \ x21”。
    }, [])
],
  module: {
    rules: [
       //css 載入配置
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
           ]
       },
       //babel es6轉換es5配置
       {
                test:/(\.jsx|\.js)$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:[
                            "env"
                        ]
                    }
                },
                exclude:path.resolve(__dirname,"node_modules"),
                include:path.resolve(__dirname,"./dist") //輸出路徑
        }
       
     ]
   }
};