javascript 代码是如何被压缩的示例代码


Posted in Javascript onMay 06, 2020

随着前端的发展,特别是 ReactVue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。 此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重要。

为什么说更小的体积很重要呢:更小的体积对于用户体验来说意味着更快的加载速度以及更好的用户体验,这也能早就企业更大的利润。另外,更小的体积对于服务器来说也意味更小的带宽以及更少的服务器费用。

前端构建编译代码时,可以使用 webpack 中的 optimization.minimizer 来对代码进行压缩优化。但是我们也需要了解如何它是压缩代码的,这样当在生产环境的控制台调试代码时对它也有更深刻的理解。

如何查看资源的体积

对于我们所编写的代码,它在操作系统中是一个文件,根据文件系统中的 stat 信息我们可以查看该文件的大小。

stat 命令用来打印文件系统的信息:

$ stat config.js
 File: ‘config.js'
 Size: 3663      Blocks: 8     IO Block: 4096  regular file
Device: fd01h/64769d  Inode: 806060   Links: 1
Access: (0644/-rw-r--r--) Uid: (  0/  root)  Gid: (  0/  root)
Access: 2020-02-13 13:43:54.851381702 +0800
Modify: 2020-02-13 13:43:52.668417641 +0800
Change: 2020-02-13 13:43:52.691417262 +0800
 Birth: -

stat 打印的信息过大,如果只用来衡量体积,可以使用 wc -c

$ wc -c config.js
3663 config.js

如何压缩代码体积?

去除多余字符: 空格,换行及注释

// 对两个数求和
function sum (a, b) {
 return a + b;
}

先把一个抽象的问题给具体化,如果是以上一段代码,那如何压缩它的体积呢:

此时文件大小是 62 Byte , 一般来说中文会占用更大的空间。

多余的空白字符会占用大量的体积,如空格,换行符,另外注释也会占用文件体积。当我们把所有的空白符合注释都去掉之后,代码体积会得到减少。

去掉多余字符之后,文件大小已经变为 30 Byte 。 压缩后代码如下:

function sum(a,b){return a+b}

替换掉多余字符后会有什么问题产生呢?

有,比如多行代码压缩到一行时要注意行尾分号。这就需要通过以下介绍的 AST 来解决。

压缩变量名:变量名,函数名及属性名

function sum (first, second) {
 return first + second;
}

如以上 first 与 second 在函数的作用域中,在作用域外不会引用它,此时可以让它们的变量名称更短。但是如果这是一个 module 中, sum 这个函数也不会被导出呢?那可以把这个函数名也缩短。

// 压缩: 缩短变量名
function sum (x, y) {
 return x + y;
}

// 再压缩: 去除空余字符
function s(x,y){return a+b}

在这个示例中,当完成代码压缩 ( compress ) 时,代码的混淆 ( mangle ) 也捎带完成。 但此时缩短变量的命名也需要 AST 支持,不至于在作用域中造成命名冲突。

更简单的表达:合并声明以及布尔值简化

合并声明的示例如下:

// 压缩前
const a = 3;
const b = 4;

// 压缩后
const a = 3, b = 4;

布尔值简化的示例如下:

// 压缩前
!b && !c && !d && !e

// 压缩后
b||c||d||e

这个示例更是需要解析 AST 了

AST

AST ,抽象语法树,js 代码解析后的最小词法单元,而这个过程就是通过 Parser 来完成的。

那么 AST 可以做什么呢?

  • eslint: 校验你的代码风格
  • babel: 编译代码到 ES 低版本
  • taro/mpvue: 各种可以多端运行的小程序框架
  • GraphQL: 解析客户端查询

我们在日常工作中经常会不经意间与它打交道,如 eslint 与 babel ,都会涉及到 js 与代码中游走。不同的解析器会生成不同的 AST,司空见惯的是 babel 使用的解析器 babylon ,而 uglify 在代码压缩中使用到的解析器是 UglifyJS 。

你可以在 AST Explorer [3] 中直观感受到,如下图:

javascript 代码是如何被压缩的示例代码

那压缩代码的过程:code -> AST -> (transform)一颗更小的 AST -> code,这与 babel 和 eslint 的流程一模一样。

javascript 代码是如何被压缩的示例代码 

UglifyJS

不要重复造轮子!

于是我找了一个久负盛名的关于代码压缩的库: UglifyJS3 [4] ,一个用以代码压缩混淆的库。那它是如何完成一些压缩功能的,比如替换空白符,答案是 AST。

webpack 中内置的代码压缩插件就是使用了它,它的工作流程大致如下:

// 原始代码
const code = `const a = 3;`

// 通过 UglifyJS 把代码解析为 AST
const ast = UglifyJS.parse(code);
ast.figure_out_scope();


// 转化为一颗更小的 AST 树
compressor = UglifyJS.Compressor();
ast = ast.transform(compressor);

// 再把 AST 转化为代码
code = ast.print_to_string();

而当你真正使用它来压缩代码时,你只需要面向配置编程即可,文档参考 uglify 官方文档 [5]

{
 {
  ecma: 8,
 },
 compress: {
  ecma: 5,
  warnings: false,
  comparisons: false,
  inline: 2,
 },
 output: {
  ecma: 5,
  comments: false,
  ascii_only: true,
 }
}

在 webpack 中压缩代码

在知道代码压缩是怎么完成的之后,我们终于可以把它搬到生产环境中去压缩代码。终于到了实践的时候了,虽然它只是简单的调用 API 并且调调参数。

一切与性能优化相关的都可以在 optimization 中找到, TerserPlugin 是一个底层基于 uglifyjs 的用来压缩 JS 的插件。

optimization: {
 minimize: isEnvProduction,
 minimizer: [
  new TerserPlugin({
   terserOptions: {
    parse: {
     ecma: 8,
    },
    compress: {
     ecma: 5,
     warnings: false,
     comparisons: false,
     inline: 2,
    },
    output: {
     ecma: 5,
     comments: false,
     ascii_only: true,
    },
   },
   sourceMap: true
  })
 ]
}

参考资料 [1]

shfshanyue/blog: https://github.com/shfshanyue/blog

[2]

前端工程化系列: https://github.com/shfshanyue/blog/tree/master/frontend-engineering

[3]

AST Explorer: https://astexplorer.net/

[4]

UglifyJS3: https://github.com/mishoo/UglifyJS2

[5]

uglify 官方文档: https://github.com/mishoo/UglifyJS2#parse-options

到此这篇关于javascript 代码是如何被压缩的的文章就介绍到这了,更多相关js代码压缩内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
深入浅析React中diff算法
May 19 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 #Javascript
Vue SSR 即时编译技术的实现
May 06 #Javascript
深入webpack打包原理及loader和plugin的实现
May 06 #Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 #Javascript
让IDE识别webpack的别名alias的实现方法
May 06 #Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 #Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 #Javascript
You might like
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
看了就知道什么是JSON
2007/12/09 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
2011/03/01 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python迭代和迭代器详解
2016/11/10 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
西式结婚主持词
2014/03/14 职场文书
联片教研活动总结
2014/07/01 职场文书
小学教师年度个人总结
2015/02/05 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
Python之matplotlib绘制饼图
2022/04/13 Python