vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

背景

公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。

webpack-obfuscator

配置

vue cli 项目配置：

若只想在打包时加密混淆，本地运行时不混淆，可以进行以下的配置：

vue cli 2.x 配置在 webpack.prod.conf.js 中

1. 原始文件

2. webpack 默认工具uglifyjs-webpack-plugin

3. webpack-obfuscator 无参数时

4. webpack-obfuscator 高度混淆

低性能：性能比没有模糊处理慢 50-100%

构建后文件大小: 29,999 字节(29.2 kb)

3. webpack-obfuscator 中等混淆

最佳性能：性能比没有模糊处理慢 30-35%

构建后文件大小：7066字节(6.90kb)

4. webpack-obfuscator 低混淆

高性能: 性能稍微慢于没有混淆

构建后文件大小: 2,424 字节(2.36 kb)

对比表格

文件名称	文件大小	正常构建	无参数	高度混淆	中度混淆	低度混淆
test.js	117字节	177字节	363字节	29.2 kb(29,999 字节)	6.90kb(7066字节)	2.36 kb(2,424 字节)
jquery.js	111 kb (113,852 字节)	85.0 kb (87,064 字节)	115 kb (117,770 字节)	1.24 mb (1,304,998 字节)	401 kb (411,543 字节)	117 kb (120,243 字节)

主要属性

注意

安装 webpack-obfuscator 时要注意webpack-obfuscator的版本要与本地项目 webpack 版本相匹配，我用的是webpack-obfuscator@0.18.0 项目 webpack 是 4.x 版本。（4.x版 本 webpack 使用最新版 webpack-obfuscator@3.3.0 会报错无法使用，webpack 杳升级到 5.x 版本）。
excludes数组 的兼容 multimatch包语法，例如支持 ['js/chunk-vendors.**.js']、 ['excluded_bundle_name.js', '**_bundle_name.js'] 或 'excluded_bundle_name.js'等。