使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  • A+
所属分类:laya

使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

Uglifyjs说明

UglifyJS是一种流行的命令行实用程序,允许你合并和压缩JavaScript文件。

  • Uglifyjs可以用来帮你压缩代码,使用户花费更少的时间从网络下载你的代码。
  • Uglifyjs也可以用来帮你混淆代码,使用它人无法轻松的阅读和理解你的代码。

Source Maps简要说明

Source Maps记录了一大堆的压缩和混淆信息,可用于将代码映射中的压缩文件恢复到它的原始来源。

  • Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式。这意味着你可以在优化压缩代码后轻松的进行调试。

Uglifyjs安装

  1. 安装node(nodejs官网下载安装)

  2. 安装npm(node装的时候也会顺带装这个)

  3. 安装uglifyjs,命令行下运行npm install -g uglify-js进行全局安装

Laya项目使用示例

创建Laya AS项目

  • 新建LayaAir UI示例项目

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  • 常规点击Restart Now

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  • 编译运行程序

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)
    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

生成带sourceMap的压缩代码

  • 切换到终端窗口

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  • 执行如下命令

    $ cd .\bin\h5\
    $ uglifyjs .\LayaUISample.max.js --comments -o LayaUISample.max.min.js --source-map
    

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    因为我们代码量很少的缘故,所以这时候压缩和混淆代码的命令很快就执行完了。执行dir可以看到当前目录下的文件。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    如上图所示,文件LayaUISample.max.min.js和文件LayaUISample.max.min.js.map就是混淆压缩后的js代码以及相应的sourceMap文件。

使用压缩混淆后的js代码

  • 使用快捷键Ctrl+P打开index.html文件

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  • 修改index.html文件,使其运行压缩混淆后的js代码,而不运行压缩前的代码

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    将上图红框部分修改为LayaUISample.max.min.js,如下图

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  • 再次编译运行程序,并切换到web开发者工具

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    如上图所示,我们可以看到现在程序已经采用了压缩混淆后的js代码

但是使用压缩混淆后的js代码,并不利于我们对代码进行调试。这个时候,sourceMap的作用就出来了,它可以帮我们达到跟调试未压缩混淆前的代码一样,方便愉快的调试我们的代码。

引入sourceMap

  1. 修改LayaUISample.max.min.js文件,引入sourceMap

    使用快捷键Ctrl+P打开文件LayaUISample.max.min.js

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    并于文件末尾增加如下代码

    //# sourceMappingURL=LayaUISample.max.min.js.map
    

    如下图所示

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  2. 再次调试运行程序

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    如下图,我们可以看到,压缩混淆前的代码文件LayaUISample.max.js也可以在开发者工具中看到了。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  3. 添加断点和调试

    如下图,我们先搜索TestView=并且,将如图所示的位置2和3分别加上断点。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    然后点击如下图所示的点我赋值按钮。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    我们可以看到顺利进入了断点。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    点击跳过当前断点。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    我们再点下另外一个点我赋值按钮。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    可以看到,也是顺利进入了断点。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

这样我们就可以愉快的进行调试啦。

正式环境如何使用

如果我们将sourceMap文件和压缩混淆前的文件一并放到外网,这样就会致使普通用户也可以对我们压缩混淆前的代码进行调试,这是不应该的!

但是怎样才能做到,内部人员可以方便的调试外网代码,而外部人员不可以呢?

解决方案

我们只需将sourceMap文件和压缩混淆前的文件置于内网,允许内网网问,而对于外网用户,由于无法访问到我们的内网,自然而然就无法像内部人员一样进行愉快的调试了。

  1. 修改LayaUISample.max.min.js文件,使其使用内网上的sourceMap文件。

    如下图,所示,将其修改未指向一内网地址

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    //# sourceMappingURL=http://192.168.2.208:9987/LayaUISample.max.min.js.map
    
  2. 将sourceMap文件和原始文件,置于内网地址目录下,我此处是http://192.168.2.208:9987指向的根目录。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

  3. 再次运行程序并尝试调试

    如下图,所示,我们可以看到,确实从http://192.168.2.208:9987加载了我们的原始文件LayaUISample.max.js

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    我们再次添加断点,并再次点击点我赋值按钮。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

    我们可以看到依然顺利进入了断点。

    使用Uglifyjs和SourceMap压缩和调试JS(laya项目)

这样,我们就可以做到,内部人士可以愉快的调试代码,而外部人士无法愉快的调试代码啦。

百分购

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: