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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
vue自定v-model实现表单数据双向绑定问题
Sep 03 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
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript 函数式编程
2007/08/16 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
express.js中间件说明详解
2019/03/19 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
烹饪自我鉴定
2014/03/01 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
Docker安装MySql8并远程访问的实现
2022/07/07 Servers