HTML,CSS,JS压缩后

为什么学习压缩后，现在的程序百分之90都做了代码压缩。

压缩的原因：功能和内容越来越多，但是网络传输速度有限，一些人的电脑带宽有限，所以需要压缩代码，减少传输时间。

还有就是学习压缩后的代码样子，可以便于一瞬间看到原始代码的逻辑是怎么样的，大致猜出来，方便逆向。

HTML

对HTML的压缩，主要体现在去掉注释，去掉空格，去掉换行。可以忽略不计。

信息

无需了解：最常用的是html-webpack-plugin完成上面说的去掉注释等操作。

https://github.com/jantimon/html-webpack-plugin

CSS

对CSS的压缩，主要是把多个CSS文件合并成一个文件，减少HTTP请求，减少网络传输时间。其他没有了。

信息

无需了解：最常用的是css-minimizer-webpack-plugin完成上面说的去掉注释等操作。

https://github.com/webpack-contrib/css-minimizer-webpack-plugin

JS压缩

提示

JS还有加密技术，加密技术在后面展开。

这块就比较复杂了。需要分多个小节梳理。

JS压缩并不仅仅是为了用任意一个压缩插件压缩后，看到结果就行了，学习Web逆向过程中，最主要是要了解用了哪些压缩方案，看到了压缩后的代码，知道是什么压缩方案，才能更好的理解压缩后的代码。

UglifyJsPlugin

目前最成熟的JavaScript压缩工具就是UglifyJS，它会分析JavaScript的代码语法树，理解代码含义，从而能做到诸如去掉无效代码，去掉日志输出代码，缩短变量名等优化。

其中Vue，React等等各大前端框架里面打包部署等，不管他们压缩的时候引入的压缩JS的工具是什么，他的核心都是UglifyJS。因此，学会UglifyJS，学习压缩后的代码，学习逆向，学习各种压缩方案，是学习Web逆向的必经之路。

插件： UglifyJsPlugin 的地址是 https://www.npmjs.com/package/uglify-js

官网是 https://lisperator.net/uglifyjs/

sourceMap：是否为压缩后的代码生成对用的SourceMap，默认不生成，开启后耗时会大大增加。一般不会把压缩后的代码SouceMap发送给网站用户的浏览器，而是用于内部开发人员调试线上代码时使用。 beautify：是否输出可读性较强的代码，会保留空格和制表符，默认为是，为了达到更好的压缩效果，可以设置为false。 comments：是否保留代码中的注释，默认保留，为了达到压缩更好的压缩效果，可以设置为false。 compress.warnings：是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出。可以设置为false以关闭这些不大的警告。 drop_console：是否剔除代码中所有的console语句，默认不剔除，开启后不仅可以提升代压缩效果，也可以兼容不支持console语句IE浏览器。 collapse_vars:是否内嵌定义了但是只永达一次的变量，例如把var x=5; y=x抓换成 y=5, 默认不转换。为了达到更好的压缩效果，可以设置为false。 reduce_vars：是否提取出出现多次但是没有定义成变量去引用的静态值。

 // 压缩输出的 JS 代码
    new UglifyJSPlugin({
      compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: false,
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true,
      },
      output: {
        // 最紧凑的输出
        beautify: false,
        // 删除所有的注释
        comments: false,
      }
    })

这里了解即可，不必追求自己会配置。

信息

作业：自己试试使用uglify-js压缩一行代码。对比前后代码样子。

参考的链接：指导文档： https://juejin.cn/post/6844903859723173902?from=search-suggest

插件地址： https://www.npmjs.com/package/uglify-js

NodeJS安装地址 https://nodejs.cn/download/

HTML,CSS,JS压缩后

HTML​

CSS​

JS压缩​

UglifyJsPlugin​

HTML

CSS

JS压缩

UglifyJsPlugin