网站用户 分析宁波网站建设联系电话查询

找了一圈加密的方法发现大部分都是会把项目依赖进行加密，实际需求项目依赖是不需要加密的，只有自己写的代码才需要，所以这边手搓了一个插件进行文件简单加密，体积增加的不多，当然也保留了自定义配置。

插件代码如下：

import javascriptObfuscator from "javascript-obfuscator";const defaultConfig = {compact: true, // 压缩代码controlFlowFlattening: false, // 控制流扁平化deadCodeInjection: false, // 死代码注入 会导致包体积变大debugProtection: true, // 调试保护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"],
};/*** @param {object} config 配置文件 可参考 https://github.com/javascript-obfuscator/javascript-obfuscator?tab=readme-ov-file#options 默认使用 defaultConfig 不了解请不要随便更改* @returns {object} 插件对象*/
export default function obfuscatePlugin(config = defaultConfig) {return {name: "liiy:obfuscatefiles",enforce: "post", // 确保在最后执行apply: "build", // 仅在生产构建时执行transformIndexHtml(html, event) {console.log("\n");console.time("加密文件耗时");console.log("开始进行文件加密：", "\n");if (!(event != null && event.bundle)) return html;for (const [path, options] of Object.entries(event.bundle)) {if (options.code) {if (!path.includes("node_modules")) {console.log("加密转换文件 -->>", path);options.code = javascriptObfuscator.obfuscate(options.code, config).getObfuscatedCode();}}}console.log("\n");console.timeEnd("加密文件耗时");console.log("加密文件结束", "\n");return html;},};
}

这边为了区分是源码还是自己写的就用了lodash的进行拆分，把依赖单独拆出来，当然，如果觉得体积变大无所谓的话可以用现成的一步到位。

配置以及使用方式如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import obfuscatePlugin from "./src/utils/obfuscatePlugin";// https://vitejs.dev/config/
/** @type {import('vite').UserConfig} */
export default ({ mode }) =>defineConfig({......plugins: [vue({ template: { precompileRoot: false } }),obfuscatePlugin(), // 自定义插件写在这],build: {rollupOptions: {output: {manualChunks: {// 自定义分包策略lodash: ["lodash"],node_modules: ["@element-plus/icons-vue","axios","echarts","element-plus","vue","vue-router","vuex",],},},},},.....});

这样就可以进行单独给些的组件和js进行加密了，体积控制的不错，如果可以使用代码请标注出处。