Open lulujianglab opened 6 years ago
JS代码压缩在前端项目优化中是用的比较多的方法,特别是对于大量使用JS的Web应用,代码压缩可以是极大的减少代码的大小,加快传输效率,大大提升用户浏览的体验感
最近刚好学习了压缩JS文件的方法--UglifyJS,据说其不仅能压缩JS代码,还能优化JS,是基于node的
UglifyJS
而且在所有的压缩工具中,UglifyJS在不改变JS语义的前提下可以提供最好的压缩率
只需要安装node,然后使用npm安装UglifyJS类库
在线压缩工具
下面我们可以看看具体的实例操作
npm install uglify-js -g
首先创建一个文件夹,将要压缩的js文件放入文件夹中,然后压缩
如下,我在demo_uglify项目文件夹中的src文件下压缩compile.js文件,将压缩文件存放到build文件夹下
demo_uglify
src
compile.js
build
uglifyjs src/compile.js -o build/compile-min.js
再运行如下代码,测试-m可选参数
uglifyjs src/compile.js -m -o build/compile.min.js
如下截图
38k的是没有运行-m参数的,29k的是运行的
-m参数就是把变量名变成a,b,c,...
上面是使用的一个简单命令来压缩一个JS文件,接下来以编程的方式来压缩JS文件
即写一个.js文件,使用node命令执行该文件,.js中的代码需要调用UglifyJS的接口函数来执行压缩任务
所以需要先到github下载UglifyJS
git clone git://github.com/mishoo/UglifyJS.git
解压后其目录结构如下
然后将uglify-js.js和lib目录拷贝到前面创建的项目中
uglify-js.js
lib
在demo_uglify的src文件中新建一个index.js,内容如下
index.js
取fs模块,fs模块是node的文件模块;接着取UglifyJS的两个模块;然后就是UglifyJS压缩流程
function buildOne (fileIn, fileOut) { var origCode = fs.readFileSync(fileIn, 'utf8') var ast = jsp.parse(origCode) ast = pro.ast_mangle(ast) ast = pro.ast_squeeze(ast) var finalCode = pro.gen_code(ast) fs.writeFileSync(fileOut, finalCode, 'utf8') } buildOne('src/index.js', 'build/index-min.js')
最后在命令行中执行
node index.js
通过在上述测试,通过node环境可以输出压缩后的代码,那也可以通过函数直接读取源文件,压缩后输出到指定的目录
在demo_uglify的src文件中新建一个test.js,写入下列代码,将src下的index.js压缩输出到build文件中
test.js
函数封装
node test.js
这时就会在demo_uglify的build目录中生成一个index-min.js
index-min.js
在上面单个文件读取压缩的代码中稍做修改,如下
function buildAll (fileIn, fileOut) { if (fileIn.length > 0) { var finalCode = [] var origCode = '' var ast = '' for (var i = 0, len = fileIn.length; i < len; i++) { origCode = fs.readFileSync(fileIn[i], 'utf8') ast = jsp.parse(origCode) ast = pro.ast_mangle(ast) ast = pro.ast_squeeze(ast) finalCode.push(pro.gen_code(ast), ';') } } fs.writeFileSync(fileOut, finalCode, 'utf8') } buildAll(['index.js', 'compile.js'], 'build.min.js')
这时会在demo_uglify目录中生成一个build.min.js
UglifyJS2是UglifyJS的重写,我们知道UglifyJS是JS开发通用的语法分析、代码压缩、代码优化的一个工具包。而对比UglifyJS,UglifyJS2则是把整个JS压缩过程,做了更进一步的细化
或者通过github下载源代码安装
git clone git://github.com/mishoo/UglifyJS2.git
用UglifyJS2命令进行操作,合并两个文件,对变量名用字母替换,进行压缩,所有代码合并到一个函数
uglify_demo完整项目
初识UglifyJS
JS代码压缩在前端项目优化中是用的比较多的方法,特别是对于大量使用JS的Web应用,代码压缩可以是极大的减少代码的大小,加快传输效率,大大提升用户浏览的体验感
最近刚好学习了压缩JS文件的方法--
UglifyJS
,据说其不仅能压缩JS代码,还能优化JS,是基于node的而且在所有的压缩工具中,
UglifyJS
在不改变JS语义的前提下可以提供最好的压缩率只需要安装node,然后使用npm安装
UglifyJS
类库在线压缩工具
下面我们可以看看具体的实例操作
全局安装
命令行简单压缩JS文件
首先创建一个文件夹,将要压缩的js文件放入文件夹中,然后压缩
如下,我在
demo_uglify
项目文件夹中的src
文件下压缩compile.js
文件,将压缩文件存放到build
文件夹下再运行如下代码,测试-m可选参数
如下截图
38k的是没有运行-m参数的,29k的是运行的
-m参数就是把变量名变成a,b,c,...
node实现批量压缩js函数
上面是使用的一个简单命令来压缩一个JS文件,接下来以编程的方式来压缩JS文件
即写一个.js文件,使用node命令执行该文件,.js中的代码需要调用
UglifyJS
的接口函数来执行压缩任务所以需要先到github下载UglifyJS
解压后其目录结构如下
然后将
uglify-js.js
和lib
目录拷贝到前面创建的项目中控制台输出压缩后代码
在
demo_uglify
的src
文件中新建一个index.js
,内容如下取fs模块,fs模块是node的文件模块;接着取
UglifyJS
的两个模块;然后就是UglifyJS
压缩流程最后在命令行中执行
单个文件读取压缩输出
通过在上述测试,通过node环境可以输出压缩后的代码,那也可以通过函数直接读取源文件,压缩后输出到指定的目录
在
demo_uglify
的src文件中新建一个test.js
,写入下列代码,将src
下的index.js
压缩输出到build
文件中函数封装
这时就会在
demo_uglify
的build
目录中生成一个index-min.js
批量读取文件压缩输出
在上面单个文件读取压缩的代码中稍做修改,如下
这时会在
demo_uglify
目录中生成一个build.min.jsUglifyJS2
UglifyJS2是UglifyJS的重写,我们知道UglifyJS是JS开发通用的语法分析、代码压缩、代码优化的一个工具包。而对比UglifyJS,UglifyJS2则是把整个JS压缩过程,做了更进一步的细化
安装
或者通过github下载源代码安装
命令操作
用UglifyJS2命令进行操作,合并两个文件,对变量名用字母替换,进行压缩,所有代码合并到一个函数
uglify_demo完整项目