- A+
使用Uglifyjs和SourceMap压缩和调试JS(laya项目)
Contents
Uglifyjs说明
UglifyJS是一种流行的命令行实用程序,允许你合并和压缩JavaScript文件。
- Uglifyjs可以用来帮你压缩代码,使用户花费更少的时间从网络下载你的代码。
- Uglifyjs也可以用来帮你混淆代码,使用它人无法轻松的阅读和理解你的代码。
Source Maps简要说明
Source Maps记录了一大堆的压缩和混淆信息,可用于将代码映射中的压缩文件恢复到它的原始来源。
- Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式。这意味着你可以在优化压缩代码后轻松的进行调试。
Uglifyjs安装
- 安装node(nodejs官网下载安装)
-
安装npm(node装的时候也会顺带装这个)
-
安装uglifyjs,命令行下运行
npm install -g uglify-js
进行全局安装
Laya项目使用示例
创建Laya AS项目
-
新建LayaAir UI示例项目
-
常规点击
Restart Now
-
编译运行程序
生成带sourceMap的压缩代码
-
切换到终端窗口
-
执行如下命令
$ cd .\bin\h5\ $ uglifyjs .\LayaUISample.max.js --comments -o LayaUISample.max.min.js --source-map
因为我们代码量很少的缘故,所以这时候压缩和混淆代码的命令很快就执行完了。执行
dir
可以看到当前目录下的文件。如上图所示,文件LayaUISample.max.min.js和文件LayaUISample.max.min.js.map就是混淆压缩后的js代码以及相应的sourceMap文件。
使用压缩混淆后的js代码
-
使用快捷键
Ctrl+P
打开index.html
文件 -
修改
index.html
文件,使其运行压缩混淆后的js代码,而不运行压缩前的代码将上图红框部分修改为
LayaUISample.max.min.js
,如下图 -
再次编译运行程序,并切换到web开发者工具
如上图所示,我们可以看到现在程序已经采用了压缩混淆后的js代码
但是使用压缩混淆后的js代码,并不利于我们对代码进行调试。这个时候,sourceMap的作用就出来了,它可以帮我们达到跟调试未压缩混淆前的代码一样,方便愉快的调试我们的代码。
引入sourceMap
- 修改
LayaUISample.max.min.js
文件,引入sourceMap使用快捷键
Ctrl+P
打开文件LayaUISample.max.min.js
并于文件末尾增加如下代码
//# sourceMappingURL=LayaUISample.max.min.js.map
如下图所示
-
再次调试运行程序
如下图,我们可以看到,压缩混淆前的代码文件
LayaUISample.max.js
也可以在开发者工具中看到了。 -
添加断点和调试
如下图,我们先搜索
TestView=
并且,将如图所示的位置2和3分别加上断点。然后点击如下图所示的
点我赋值
按钮。我们可以看到顺利进入了断点。
点击跳过当前断点。
我们再点下另外一个
点我赋值
按钮。可以看到,也是顺利进入了断点。
这样我们就可以愉快的进行调试啦。
正式环境如何使用
如果我们将sourceMap文件和压缩混淆前的文件一并放到外网,这样就会致使普通用户也可以对我们压缩混淆前的代码进行调试,这是不应该的!
但是怎样才能做到,内部人员可以方便的调试外网代码,而外部人员不可以呢?
解决方案
我们只需将sourceMap文件和压缩混淆前的文件置于内网,允许内网网问,而对于外网用户,由于无法访问到我们的内网,自然而然就无法像内部人员一样进行愉快的调试了。
- 修改
LayaUISample.max.min.js
文件,使其使用内网上的sourceMap文件。如下图,所示,将其修改未指向一内网地址
//# sourceMappingURL=http://192.168.2.208:9987/LayaUISample.max.min.js.map
- 将sourceMap文件和原始文件,置于内网地址目录下,我此处是http://192.168.2.208:9987指向的根目录。
-
再次运行程序并尝试调试
如下图,所示,我们可以看到,确实从
http://192.168.2.208:9987
加载了我们的原始文件LayaUISample.max.js
。我们再次添加断点,并再次点击
点我赋值
按钮。我们可以看到依然顺利进入了断点。
这样,我们就可以做到,内部人士可以愉快的调试代码,而外部人士无法愉快的调试代码啦。