vite+vue3 打包代码混淆

产品化最后一道防线，项目上线前打包时，前端代码混淆。

和webpack相比，vite生态还是不够丰富，找个打包代码混淆插件好难，好在找到了rollup-plugin-obfuscator

不废话，上代码

1、安装代码混淆插件rollup-plugin-obfuscator

yarn add --dev rollup-plugin-obfuscator javascript-obfuscator

或者

npm install --save-dev rollup-plugin-obfuscator javascript-obfuscator

2、添加obfuscator.ts，在index.ts引入插件调用方法

• obfuscator.ts文件

import obfuscator from 'rollup-plugin-obfuscator';
export function codeObfuscatorPlugin(isBuild: boolean) {
  if (!isBuild) {
    return [];
  }
  return obfuscator({
    global: true,
    options:{
        rotateUnicodeArray: true,
        compact: true,
        controlFlowFlattening: false,
        controlFlowFlatteningThreshold: 0.4,
        deadCodeInjection: false,
        deadCodeInjectionThreshold: 0.2,
        debugProtection: true,
        debugProtectionInterval: 2000,
        disableConsoleOutput: true,
        domainLock: [],
        identifierNamesGenerator: 'hexadecimal',
        identifiersPrefix: '',
        inputFileName: '',
        log: false,
        renameGlobals: false,
        reservedNames: [],
        reservedStrings: [],
        rotateStringArray: false,
        seed: 0,
        selfDefending: true,
        sourceMap: false,
        sourceMapBaseUrl: '',
        sourceMapFileName: '',
        sourceMapMode: 'separate',
        stringArray: false,
        stringArrayEncoding: ['base64'],
        stringArrayThreshold: 0.8,
        target: 'browser',
        transformObjectKeys: false,
        unicodeEscapeSequence: false,
      }
  })
}

• index.ts引入
  

• vite.config.ts引入代码混淆插件
  

3、上线部署后，一打开console面板，直接禁用debugger

以上，搞定，收工！