Webpack 探析： javascript 代码是如何被压缩的

在webpack 日益流行的今天，前端构建编译代码时，可以使用 webpack 中的 optimization.minimizer 来对代码进行压缩优化。但是我们也需要了解如何它是压缩代码的，我们可以一起一点点来探究它。

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

这是一个很直接的想法，同时也是很重要的一步，毕竟代码是要给人看的，所以我们需要 换行，空格等等。但是呢，机器阅读是不需要这些东西的。
替换掉多余字符后会有什么问题产生呢？
有，比如多行代码压缩到一行时要注意行尾分号。 这就需要通过以下介绍的 AST 来解决。

压缩变量名：变量名，函数名及属性名

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

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

function s(x,y){return a+b}

在这个示例中，当完成代码压缩 (compress) 时，代码的混淆 (mangle) 也捎带完成。但此时缩短变量的命名也需要 AST 支持，不至于在作用域中造成命名冲突。
到这里，肯定有读者在问： AST到底是什么，又是怎么工作的？
别急，下面会介绍到。

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

这里放两个简单的示例：

const a = 3;
const b = 4;

const a = 3, b = 4;

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

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

下面才是到了重头戏：AST 出场

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

那么 AST 可以做什么呢？

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

其实，code可以转换变成AST，那么AST是否可以变成code呢，答案是肯定的，而这也是很多前端工具工作的方式：
压缩代码的过程就是：

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

有读者肯定问AST 说了这么多，到底什么样？
https://astexplorer.net/
这里给大家放一个简单的示例：

let tips = [
  "Click on any AST node with a '+' to expand it",

  "Hovering over a node highlights the \
   corresponding part in the source code",

  "Shift click on an AST node expands the whole substree"
];

当然这只是webpack优化的一小部分内容，后期会继续探索。
欢迎大家关注博客！