vite项目使用自定义插件调用javascript-obfuscator进行加密。

找了一圈加密的方法发现大部分都是会把项目依赖进行加密实际需求项目依赖是不需要加密的只有自己写的代码才需要所以这边手搓了一个插件进行文件简单加密体积增加的不多当然也保留了自定义配置。插件代码如下importjavascriptObfuscatorfromjavascript-obfuscator;constdefaultConfig{compact:true,// 压缩代码controlFlowFlattening:false,// 控制流扁平化deadCodeInjection:false,// 死代码注入 会导致包体积变大debugProtection:false,// 调试保护debugProtectionInterval:0,// 调试保护间隔disableConsoleOutput:true,// 禁用控制台输出identifierNamesGenerator:mangled-shuffled,// 标识符名称生成器 hexadecimal(十六进制) mangled(短标识符)log:false,// 是否显示日志numbersToExpressions:false,// 数字转换为表达式renameGlobals:false,// 重命名全局变量selfDefending:true,// 自我防御simplify:true,// 简化代码splitStrings:false,// 分割字符串stringArray:false,// 字符串数组transformObjectKeys:false,// 转换对象键unicodeEscapeSequence:true,// Unicode 转义序列reservedNames:[^slot$,^v-slot$,^scopedSlots$,^\\$scopedSlots],reservedStrings:[\\$emit,\\$attrs,\\$listeners],};/** * 判断一个输出 chunk 是否包含手写源码src/ 目录下的模块 * 仅对包含手写代码的 chunk 做混淆纯第三方依赖的 chunk 跳过 * param {Object} chunk - Rollup 输出 chunkOutputChunk * returns {boolean} 是否包含 src/ 下的模块 */functionhasSourceCode(chunk){if(!chunk||!chunk.modules)returnfalse;returnObject.keys(chunk.modules).some((modulePath){returnmodulePath.includes(/src/)||modulePath.startsWith(src/);});}/** * param {object} config 配置文件 可参考 https://github.com/javascript-obfuscator/javascript-obfuscator?tabreadme-ov-file#options 默认使用 defaultConfig 不了解请不要随便更改 * returns {object} 插件对象 */exportdefaultfunctionobfuscatePlugin(configdefaultConfig){return{name:liiy:obfuscatefiles,enforce:post,apply:build,generateBundle(options,bundle){console.log(\n);console.time(加密文件耗时);letcount0;letskipped0;for(const[filePath,chunk]ofObject.entries(bundle)){// 只处理 JS chunk跳过 CSS / asset / sourcemapif(!chunk.code)continue;// 跳过 vendor-* 手动分包已在 manualChunks 中排除constfileNamefilePath.split(/).pop()||filePath;if(fileName.startsWith(vendor-)){skipped;continue;}// 跳过不包含手写源码的 chunk纯第三方依赖的自动分包if(!hasSourceCode(chunk)){skipped;continue;}chunk.codejavascriptObfuscator.obfuscate(chunk.code,config).getObfuscatedCode();count;}console.log(\n共加密${count}个文件手写代码跳过${skipped}个文件第三方依赖);console.timeEnd(加密文件耗时);console.log(加密文件结束\n);},};}这边为了区分是源码还是自己写的就用了lodash的进行拆分把依赖单独拆出来当然如果觉得体积变大无所谓的话可以用现成的一步到位。配置以及使用方式如下import{defineConfig}fromvite;importvuefromvitejs/plugin-vue;importobfuscatePluginfrom./src/utils/obfuscatePlugin;// https://vitejs.dev/config//** type {import(vite).UserConfig} */exportdefault({mode})defineConfig({......plugins:[vue({template:{precompileRoot:false}}),obfuscatePlugin(),// 自定义插件写在这],build:{outDir:dist-ui-mode,rollupOptions:{// 排除纯 Node.js 库file-viewer 的间接依赖浏览器无法使用// 同时匹配裸模块名和 pnpm 解析后的完整路径external:(id){if(idavsc||idljheee/xmind-parser||idsafer-buffer)returntrue;return/node_modules[\\/](\.pnpm[\\/])?(avsc|ljheee[\/\-]xmind-parser|safer-buffer)(|[\\/])/.test(id);},output:{manualChunks:{// 大库独立分包避免单一巨型 chunkvendor-vue:[vue,vue-router,vuex],vendor-element:[element-plus,element-plus/icons-vue],vendor-echarts:[echarts],vendor-vant:[vant],vendor-utils:[axios,socket.io-client,localforage,qs],vendor-ui:[tailwindcss,nprogress,markstream-vue],vendor-misc:[md5-node],vendor-file-viewer:[file-viewer/vue3-full],},},},},.....});这样就可以进行单独给些的组件和js进行加密了体积控制的不错如果可以使用代码请标注出处。