前言:很多小伙伴也许在写代码的时候,会疑惑js代码在编写之后,是如何编译的,在编译之后,又是如何进行压缩的呢?那么这篇文章会解决你对于js代码是如何压缩的疑惑

这里提供压缩js代码的几种思路:

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

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

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

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

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

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

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

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

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

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

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

3.解析程序逻辑:合并声明以及布尔值简化

通过分析代码逻辑,可对代码改写为更精简的形式。

合并声明的示例如下:

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

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

布尔值简化的示例如下:

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

// 压缩后
!(b||c||d||e)

4.解析程序逻辑: 编译预计算

在编译期进行计算,减少运行时的计算量,如下示例:

// 压缩前
const time = 365 * 24 * 60 * 60

// 压缩后
const time = 31536000

5.以及更加复杂的例子,是js代码简化的典例。

// 压缩前
function hello () {
  console.log('hello, world')
}

hello()

// 压缩后
console.log('hello, world')

其余的js压缩方法还有很多,如有大佬指教请在评论区指正

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐