前台项目文件(.js/.css)压缩混淆处理

前台项目文件(.js/.css)压缩混淆处理

各位大牛好，接触前端快有一年了，中间停了很长一段时间，现在换了新工作又捡起来了，决定下功夫好好钻研，于是乎，开启我的博客，总结平时学到的知识，记录所遇到的难点和犯过的错误，分享我的生活。昨天，应领导要求，需要将项目的前台文件进行混淆、压缩处理，刚听到以后懵了，完全没有接触过“混淆”这个词，更别说具体做了，于是寻求度娘的帮助。

代码混淆

使用字符串阵列化、平展控制流、多态变异、僵尸函数等手段，使代码变的不可读不可分析，达到最终保护的目的。且不影响代码原有功能。是理想、实用的JS保护方案。
它的基本原理大概有两种：

1. 通过正则替换实现的混淆器
2. 通过语法树替换实现的混淆器（更为强大、安全）

代码压缩

压缩则是去掉代码中多余的空格和注释，同时将变量名改为少量字符组成的名字减小js文件体积，加快下载

工具

在百度的过程中，我也查到了两个比较好用的工具，例如：

• Uglifyjs：这个工具是开源的，不过大部分用于压缩，混淆功能并不突出，它依赖node.js环境。
• jshaman：可在线免费试用十次，商用的话需要进行购买，很强大，自己测试了几个复杂的js页面，无论混淆还是反混淆，都没有报错，完美运行。

最后我还是选择了开源的Uglifyjs，node.js的安装与环境配置，在这就不做赘述。
先全局安装Uglifyjs，控制台命令：npm install -g uglify-js

一.单个压缩

1. 打开控制台cmd
2. cd定位到要压缩的js所在文件位置
3. 运行如下两行命令(选择其一)：
   uglifyjs xxx.js -o xxxx.js
   uglifyjs xxx.js -m -o xxxx.js          (xxx是压缩前的名称，xxxx是压缩后的名称)
4. 运行后会发西安新生成的文件体积缩小很多，带’-m’的指令是将js中函数的变量名都变成a、b、c…

二.批量压缩

1. 新建一个txt文件，将一下内容复制：

@echo off
:: 设置压缩JS文件的根目录，脚本会自动按树层次查找和压缩所有的JS
SET JSFOLDER=D:\uglifyDestination（注意路劲中不能有空格）
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js(此处也可换成.css)) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

2. 修改内容中的路径(所要压缩的代码路径)
3. 然后更改文件格式为".bat"，点击运行

还有一些其他的压缩方式，对目前的我来说有些难度，就不写了，日后用的时候再说~

将压缩好的代码打包部署到服务器上，就好了，在以往压缩也能起到混淆的作用，但现在的浏览器或者编译器，例如chrome已经有格式化代码的功能，还是能将压缩后代码进行美化处理，增强可读性，要真正加密或或者放防羊毛党的还是得进行混淆处理，批量混淆的方法还在研究，大家可以将项目中的核心代码段进行混淆处理再替换，只不过会麻烦一点。

参考: https://www.cnblogs.com/wishyouhappy/p/3647149.html
         https://www.cnblogs.com/zzsdream/p/5674866.html