使用 UglifyJS 对 JavaScript 进行压缩

简介:

glifyJS 以其高效的Javascript压缩器而知名. UglifyJS 默认的压缩设置很好用,但还没有发挥出全部潜力. 还有许多的附加指令可以用于压缩选项,包括:

  • sequences — 使用逗号操作符加入连续的简单语句
  • properties — 使用点好重写属性访问,例如foo["bar"] → foo.bar
  • dead_code — 移除不可达的代码
  • drop_debugger — 移除调试器和调试语句
  • unsafe (default: false) — 应用“不安全”的转换(下面会讨论到)
  • conditionals — 为if -s 和条件表达式应用优化
  • comparisons — 针对二进制节点应用某些特定的优化,例如:!(a <= b) → a > b (只在不安全时), 尝试去否认二进制节点,例如.a = !b && !c && !d && !e → a=!(b||c||d||e) 等等.
  • evaluate — 尝试去计算常量表达式
  • booleans — 多种针对布尔上下文的优化,例如 !!a ? b : c → a ? b : c
  • loops — 当我们可以静态的判断条件的取值时,针对do,while和for循环的优化
  • unused — 去掉没有被引用过的函数和变量
  • hoist_funs — 提升函数声明
  • hoist_vars (默认值: false) — 提升var声明 (因为一般看起会增加输出的大小,所以它默认是false的)
  • if_return — 这对 if/return 和 if/continue 的优化
  • join_vars —加入连续的var语句
  • cascade — 对于 sequences, transform x, x into xandx = something(), x into x = something() 的一些小优化
  • warnings — 当去掉不可达代码或者没有被使用的声明等东西时,显示警告.
  • negate_iife — 在返回值被丢弃的地方否认 "即刻调用函数表达式", 来避免代码生成器会插入的括号.
  • pure_getters — 默认为false。如果你传入true, UglifyJS 会假定对象属性访问(例如. foo.bar 或者 foo["bar"]) 不会有任何副作用.
  • pure_funcs — 默认为null. 你可以传入一个名称的数组,而UglifyJs将会假定那些函数不会产生副作用. 危险: 如果名称在作用范围内被重新定义了就不会检查. 这里有一个示例场景, 例如 var q = Math.floor(a/b). 如果变量q没有在别的地方使用, UglifyJS 会去掉它,但是仍然会保留 Math.floor(a/b), 而不清楚它是做什么用的. 你可以传入 pure_funcs: [ 'Math.floor' ] 来让其知道这个函数不会产生任何副作用, 在这种情况下,整个语句会被丢弃. 当前的实现会增加一些开销(压缩会变慢).
  • drop_console — 默认为false. 传入true会丢弃对console.函数的调用.

因此可以通过 修改布尔值 , 移除不必要var语句,砍掉不可达代码以及其它更多的办法,UglifyJS把你的js文件中多余的东西就挤了出来,而不只是做一下简单的压缩而已. 这里有一个使用NodeJS API的场景示例:

var UglifyJS = require('uglify-js');
var fs = require('fs');

var result = UglifyJS.minify('site.js', {
    mangle: true,
    compress: {
        sequences: true,
        dead_code: true,
        conditionals: true,
        booleans: true,
        unused: true,
        if_return: true,
        join_vars: true,
        drop_console: true
    }
});

fs.writeFileSync('site.min.js', result.code);

你也可以通过命令行传入那些压缩值.本文之意义不在开创,而更多的是去提升那种运用起来很简便的意识 —compress 并不会对任何潜在的方面都进行最小化优化. 如果你想要最小化压缩你的js,那就全力以赴吧!

相关文章
|
7月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
JSON JavaScript 数据格式
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
159 0
|
7月前
|
JSON JavaScript 数据格式
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
134 0
|
3月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
198 14
|
4月前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
243 2
|
6月前
|
自然语言处理 JavaScript 前端开发
JS代码是如何被压缩的
JS代码是如何被压缩的
44 1
|
6月前
|
移动开发 JavaScript 前端开发
使用GruntJS链接与压缩多个JavaScript文件
使用GruntJS链接与压缩多个JavaScript文件
40 3
|
前端开发 JavaScript Java
前端——使用RequireJS的r.js打包压缩模块
前端——使用RequireJS的r.js打包压缩模块
|
JavaScript 前端开发
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
221 0
|
7月前
|
JavaScript 前端开发
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
45 0