关于JS和CSS文件压缩问题

作者 Simmin 日期 2017-03-31
关于JS和CSS文件压缩问题

前端开发中我们经常需要压缩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 压缩时需注意

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

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

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文件压缩的原理:

  1. 去换行符
  2. 去空格
  3. 去tab
  4. 去注释(这个不一定)

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

1.在线版

很多,比如:

Css代码压缩/解压缩格式化 - 站长工具

2.前端自动化构建

gulp(见文章最后)

三、使用Gulp压缩文件

Gulp本身不提供css、js文件压缩功能,需要使用相关插件。

  1. css压缩 gulp-minify-css
  2. js压缩 gulp-uglify
  3. js压缩前代码检测 gulp-jshint(或者gulp-jslint)
  4. 重命名文件 gulp-rename
npm install --save-dev gulp-minify-css gulp-uglify gulp-jshint gulp-rename

gulpfile.js

var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint');
//语法检查
gulp.task('jshint', function() {
return gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//压缩css
gulp.task('minifycss', function() {
return gulp.src('./src/css/*.css') //需要操作的文件
.pipe(rename({ suffix: '.min' })) //rename压缩后的文件名
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('dist/css')); //输出文件夹
});
//压缩,合并 js
gulp.task('minifyjs', function() {
return gulp.src('./src/js/*.js') //需要操作的文件
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('dist/js')) //输出到文件夹
.pipe(rename({ suffix: '.min' })) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js')); //输出
});   //默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task('default', ['jshint'], function() {
gulp.start('minifycss', 'minifyjs');  
});

参考:

  1. javascript压缩的原理及工具
  2. 使用Gulp进行Javascript以及css压缩合并