作者相关文章： vue3项目加密混淆
项目背景：vue@cli3，webpack4
下载依赖
npm install --save-dev webpack-obfuscator@4.x.x
vue.confog.js配置
tips：复杂度越高，打包速度越慢，页面响应时间越长
//编译速度良好（属于简单混淆，压缩）
const WebpackObfuscator = require('webpack-obfuscator');
module.exports = {
configureWebpack: {
plugins: [
//低混淆
new WebpackObfuscator({
// 压缩代码
compact: true,
// 是否启用控制流扁平化(降低1.5倍的运行速度)
controlFlowFlattening: false,
// 随机的死代码块(增加了混淆代码的大小)
deadCodeInjection: false,
// 此选项几乎不可能使用开发者工具的控制台选项卡
debugProtection: false,
// 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
debugProtectionInterval: false,
// 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
disableConsoleOutput: true,
// 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
identifierNamesGenerator: 'hexadecimal',
log: false,
// 是否启用全局变量和函数名称的混淆
renameGlobals: false,
// 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
rotateStringArray: true,
// 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
selfDefending: true,
// 删除字符串文字并将它们放在一个特殊的数组中
stringArray: true,
//这里是网上复制来的代码改的，不然会报错，具体报错看下面的贴的！！！！！！！！！！！！！！！！！！！
// stringArrayEncoding: false,
stringArrayEncoding: ['base64'],
stringArrayThreshold: 0.75,
// 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
unicodeEscapeSequence: false
}, []),
]
}
}
解决混淆复杂度越高，响应时间越慢的问题
-
下载指定依赖
npm i --save-dev compression-webpack-plugin@5.0.1 -
vue.confog.js配置
//放在 configureWebpack 插件前面调用，删除configureWebpack.compact属性
new CompressionPlugin({
algorithm: 'gzip', // 使用gzip压缩
test: /.js$|.html$|.css$/, // 匹配文件名
filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
minRatio: 1, // 压缩率小于1才会压缩
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
}),
- nginx配置
gzip_static on;
代码混淆遇到的问题（更新）
- 打包后会在浏览器经常性显示内存溢出问题，
- 打包后element-ui极小部分功能失效例如时间控件关闭icon没有展示出来
- 没有混淆代码前大小3~4M，低混淆后9~10M
原因：
- webpack-obfuscator在代码打包以后才会执行
- 执行过程会把所有打包后的文件都执行
- 其中就包含了其他无需混淆的
插件或第三方库，因为你本身只需要打包自己的源代码即可
解决办法
- 关注new WebpackObfuscator第二个参数
new WebpackObfuscator({},[不需要打包的文件，fiel1,flex2]) - 如何知晓文件名:查看打包后的文件
- 看官网介绍
意思是说：数组里面可以填写你的name或者id名称，但是还不够详细，但是他还提到了 multimatch包，主要用于扩展迷你匹配.match（） 并支持多种模式
*匹配0到多个字符?匹配一个字符[...]匹配一个字符列表，类似正则表达式的字符列表!(pattern|pattern|pattern)反向匹配括号内的模式?(pattern|pattern|pattern)匹配0或1个括号内的模式+(pattern|pattern|pattern)匹配至少1个括号内的模式*(pattern|pattern|pattern)匹配0到多个括号内的模式@(pattern|pat*|pat?erN)精确匹配括号内的模式**匹配0到多个子目录，递归匹配子目录
- 代码尝试，发现不能直接写
[chunk-**.**.js]无效，原因是打包后js存放在dist/js,所以最后展示为
new WebpackObfuscator({},[
'js/vendors~app.**.js', 'js/chunk-**.**.js'
])
- 精简代码， 源码主要体现在打包后的app.**.**.js 里，所以除了他以外的无需混淆
new WebpackObfuscator({},[
'js/!(app.**.**.js)'
])
