java-js知识库之十——js代码压缩和混淆

本篇记录使用uglifyjs压缩和混淆js文件。

一、安装uglifyjs

命令行输入npm install uglify-js -g

C:\Users\Administrator>npm install uglify-js -g
C:\Users\Administrator\AppData\Roaming\npm\uglifyjs -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\uglify-js\bin\uglifyjs
+ uglify-js@3.4.9
added 3 packages from 38 contributors in 5.753s

二、压缩js文件

准备js文件，命令行进入js所在目录，命令行输入uglifyjs bubble.js -o bubble.min.js，-o表示压缩。

D:\js>uglifyjs bubble.js -o bubble.min.js

目录下生成bubble.min.js文件

如图所示，js被压缩了。

三、混淆js文件

js混淆会将变量名变更。
命令行输入uglifyjs bubble.js -m -o bubble.min.js，-m表示混淆

D:\js>uglifyjs bubble.js -m -o bubble.min.js

四、source map文件

命令行输入uglifyjs bubble.js -m -o bubble.min.js --source-map,
会生成map文件。

D:\js>uglifyjs bubble.js -m -o bubble.min.js --source-map

在生成的压缩js(bubble.min.js)末尾加入//@ sourceMappingURL=bubble.min.js.map，后面的路径自定义。

//@ sourceMappingURL=bubble.min.js.map

一般项目发布时，sourceMappingURL路径下的文件是不存在的，当需要进行代码调试时，再将map文件放入服务器。
路径下map文件不存在，无法进行代码调试：

路径下map文件存在，可以进行代码调试：