网站搜索优化操作中JS压缩的流程问题的讨论

前端开发过程中大多时候需要压缩CSS和js文件，当然这与搜索引擎优化对于网站压缩的要求不谋而合。 主要原因：一方面，为了减小文件尺寸、加快文件传送。 另一方面，压缩的文件可读性差，起到保护源代码的作用。

一、JS文件压缩、混淆

1.1 原理

我们在使用jQuery时，jquery.min.js就是jquery.js的压缩、混淆版。

压缩：删除 JS 代码中注释、tab、换行符及无用的空格，从而压缩 JS 文件大小。

混淆：经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。

通常我们对于变量名、函数名等会用比较直观的带有语义的方式命名，例如

var username = "zhangsan";

但是

var a = "zhangsan";

对于计算机来说是一样的。

深度压缩JS文件是指尽可能缩短变量名，因为变量名在文件中的大小不小。所以我们经常在压缩文件中看到变量名或函数名，比如a、b、c、d。即使不同作用域中的变量名也是重复的，因为这也是JS语法所允许的，是它的特性之一。

1.2 压缩时需注意

代码格式要尽量规范。JS允许在每一行语句结束后不加分号，但是为了压缩时减少错误发生，最好还是规范地加上分号，虽然目前压缩工具已经比较智能。

备份好源文件。首先，可能在源文件的基础上再次开发；其次，一次压缩不一定会成功。

1.3 压缩/格式化工具

必须明确的是：仅仅是简单压缩过的是可逆的；若是混淆过的，一般不可逆。

1.在线版

很多，比如：

JS混淆加密压缩 - 站长工具

雅虎的 YUI Compressor

Google的在线版本 Javascript Closure Compiler

2.离线版

Google的下载版本 Javascript Closure Compiler

3.前端自动化构建

gulp(见文章最后)

二、CSS文件压缩

也许在当前的开发中，我们还没有提到压缩CSS文件的需要，但是当我们基于Bootstrap开发时，我们经常会看到Bootstrap.css和bootstrap.min.css。后者是压缩过的文件。

对于CSS文件压缩的原理：

• 去换行符

• 去空格

• 去tab

• 去注释（这个不一定）

对于CSS文件没有混淆一说，因为css中的选择器是不可更改的，所以css文件可缩小的体积很小。