一站式百度SEO排名优化!-找老刘博客 低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>SEO技术

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

首页 2019-09-07 SEO技术 1503 ℃Tags: 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语法所允许的,是它的特性之一。

1567865937167210.png

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文件可缩小的体积很小。


搜索
分类
热门标签
  • 首页
  • 电话
  • QQ
  • 联系老刘手机
    1043025812
    联系老刘微信
    扫描微信二维码