`
suflow
  • 浏览: 168467 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JS和CSS压缩器,以及nginx的concat模块

阅读更多

 

一、一个是js 和 css的文件压缩器

其实是两个工具,我把它们合在一起
1. 首先是,老牌的 YUI Compressor 。
很简单 , http://developer.yahoo.com/yui/compressor/  只要下载一个jar包,就可以了
使用方式:

 

 java -jar yuicompressor-x.y.z.jar [options] [input file]

 

具体的 options 可以通过 java -jar yuicompressor-x.y.z.jar -h 查看,
这里最好通过参数指定一下编码 --charset utf-8,默认会采用系统编码

2. 然后是,Google的 Closure Compiler,它是专门正对js的 编译器(不仅仅是压缩)
官方地址: https://developers.google.com/closure/compiler/
使用方式:

java -jar compiler.jar --js [INPUT_FILE] --js_output_file [OUTPUT_FILE]

默认编码是 输入文件为utf-8,输出为ASCII

它有三种编译的等级用以下参数指定:

--compilation_level [WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS]

默认采用SIMPLE_OPTIMIZATIONS, 请谨慎使用高级模式(ADVANCED_OPTIMIZATIONS)

测试了一下发现Closure Compiler的 压缩率会比YUI Compressor 高一些(大概将近10%)
所以,我一般用Closure Compiler压 缩js,用YUI Compressor压缩 css,写了一个简单的脚本

 

#!/bin/bash</p>
 
# compress 'js' or 'css' files</p>
 
if [ $# -eq 0 ]; then
    echo 'Usage: compressor.sh [input file]'
    exit 1
fi
 
INPUT_FILE=${!#}
echo "Input file is: $INPUT_FILE"
echo "Start compress ... "
 
SNAME=${INPUT_FILE%.*}
SEXT=${INPUT_FILE##*.}
OUTPUT_FILE=${SNAME}.min.${SEXT}
if [ $SEXT = 'js' -o $SEXT = 'JS' ];then
    echo "Run Closure-Compiler ..."
    java -jar compiler.jar --js $INPUT_FILE --js_output_file $OUTPUT_FILE
else
    echo "Run YUI-Compressor ..."
    java -jar yuicompressor-2.4.7.jar $INPUT_FILE -o $OUTPUT_FILE --charset utf-8
fi</p>
 
echo "Compress successful."
echo "Output file is: $OUTPUT_FILE"

 

 

二、nginx的concat组件

大家应该看到过这样的链接吧
http://{domain}//js/??zepto.js,base.js,index.js
原本是三个链接,通过nginx的concat组件,可以合并这些简单的资源链接,减少http请求。
1. 先下载concat:
svn co http://code.taobao.org/svn/nginx_concat_module/trunk nginx_concat_module

2. 再下载nginx,并指定concat的路径(上面下载的目录) 安装

./configure --prefix=/opt/nginx --add-module=$MYDIR/nginx_concat_module
 make
sudo make install

3. 最后配置nginx

location / {
    root   html;
    index  index.html index.htm;
    concat  on;#开关
}

 

分享到:
评论

相关推荐

    windows系统下的nginx1.4.1,集成了淘宝的concat模块

    这是我在windows下用源码编译的nginx,集成了http-concat模块,现在一直在用,分享出来供大家使用。

    nginx中使用nginx-http-concat模块合并静态资源文件

    主要介绍了nginx中使用nginx-http-concat模块合并静态资源文件,用以加速网站的CSS、JS等静态资源载入速度,需要的朋友可以参考下

    nginx 部署 vue 项目找不到js css文件的解决方法

    主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    Windows 平台 Nginx Rtmp模块

    Windows 平台 Nginx Rtmp模块编译后的文件,nginx版本是nginx-1.12.1,自测可用 Windows 平台 Nginx Rtmp模块编译后的文件,nginx版本是nginx-1.12.1,自测可用

    补充:Nginx之模块处理流程

    nginx的内部结构是由核心部分和一系列的功能模块所组成。这样划分是为了使得每个模块的功能相对简单,便于开发,同时也便于对系统进行功能扩展。这样的模块化设计类似于面向对象中的接口类,它增强了nginx源码的...

    深入理解Nginx模块开发及架构解析

    深入理解Nginx模块开发及架构解析,深入理解Nginx模块开发及架构解析

    Windows下编译Nginx并添加模块.docx

    Windows下编译Nginx并添加模块,在项目中使用过的

    深入理解Nginx模块开发与架构解析.pdf

    阅读这一部分的读者不需要了解C语言,就可以学习如何部署Nginx,学习如何向其中添加各种官方、第三方的功能模块,如何通过修改配置文件来更改Nginx及各模块的功能,如何修改Linux操作系统上的参数来优化服务器性能,...

    深入理解Nginx模块开发与架构解析第2版PDF

    接着,综合Nginx框架代码分析了Nginx架构的设计理念和技巧,此外,还新增了如何在模块中支持HTTP变量,以及与slab共享内存等相关的内容,相信通过完善,可进一步帮助读者更好地开发出功能丰富、性能—流的Nginx模块...

    深入理解Nginx:模块开发与架构解析-陶辉.mobi kindle版

    本书首先通过介绍官方Nginx的基本用法和配置规则,帮助读者了解一般Nginx模块的用法,然后重点介绍如何开发HTTP模块(含HTTP过滤模块)来得到定制的Nginx,其中包括开发一个功能复杂的模块所需要了解的各种知识,如...

    win版本带nginx-rtmp模块

    双击nginx.exe # 简要说明 conf/nginx.conf 为配置文件实例 RTMP监听 1935 端口,启用live 和hls 两个application HTTP监听 8080 端口, * :8080/stat 查看stream状态 * :8080/index.html 为一个直播播放与直播...

    深入理解Nginx模块开发与架构解析(第2版).zip

    接着,综合Nginx框架代码分析了Nginx架构的设计理念和技巧,此外,还新增了如何在模块中支持HTTP变量,以及与slab共享内存等相关的内容,相信通过完善,可进一步帮助读者更好地开发出功能丰富、性能—流的Nginx模块...

    深入理解Nginx模块开发与架构解析第2版pfd版带书签

    但如果希望通过阅读本书的第二、第三两部分,来学习Nginx的模块开发和架构设计 技巧时,则必须了解C语言的基本语法。在阅读本书第三部分时,需要读者对TCP有一个基 本的了解,同时对Linux操作系统也应该有简单的了解...

    Nginx模块源码 nginx-notice-2

    Nginx模块源码 nginx-notice-2 一只小麻雀。 通过Post的方式取文件 Nginx 0.7 可编译。

    深入理解Nginx模块开发与架构解析第2版

    本书首先通过介绍官方Nginx的基本用法和配置规则,帮助读者了解一般Nginx模块的用法,然后重点介绍如何开发HTTP模块(含HTTP过滤模块)来得到定制的Nginx,其中包括开发一个功能复杂的模块所需要了解的各种知识,如...

    深入理解Nginx:模块开发与架构解析

    模块开发与架构解析》首先通过介绍官方Nginx的基本用法和配置规则,帮助读者了解一般Nginx模块的用法,然后重点介绍如何开发HTTP模块(含HTTP过滤模块)来得到定制的Nginx,其中包括开发一个功能复杂的模块所需要...

    深入理解Nginx模块开发与架构解析第2版.pdf

    深入理解Nginx模块开发与架构解析第2版LinuxUnix技术丛书

    nginx-rtmp模块

    nginx-rtmp-module-master 源码包 nginx的rtmp流媒体模块

    nginx模块开发教程

    nginx模块开发教程,简述模块开发的方法

Global site tag (gtag.js) - Google Analytics