`
suflow
  • 浏览: 169943 次
  • 性别: 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模块

    "http-concat":这是Nginx的一个第三方模块,主要用于减少HTTP请求,通过合并多个资源文件来提升页面加载速度,尤其适用于CSS和JavaScript。 "windows"和"win7":表明这个Nginx版本是在Windows操作系统,特别是...

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

    `nginx-http-concat`模块正是为了这个目的而设计的,它允许Nginx服务器将多个CSS和JavaScript文件合并成一个请求,从而减少HTTP请求的数量,加快页面的加载速度。这个模块由阿里巴巴开发并开源,可以在GitHub上找到...

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

    在使用nginx部署Vue项目时,有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法,主要包括vue-cli@3的配置方式和vue-...

    补充:Nginx之模块处理流程

    1. **核心模块(Core Modules)**:这是Nginx的基础,负责建立服务器的基础服务框架,管理网络层和应用层的协议,以及启动和协调其他模块的工作。核心模块为Nginx提供了基本的服务模型,并确保了其他模块的正常运行。 ...

    第一个Nginx模块的例子

    - **第三方模块**:由社区开发,用于扩展Nginx功能,如缓存、压缩、限速等。 2. **创建Nginx模块的基本步骤**: - **理解模块结构**:每个模块通常包含解析配置文件的函数(如`ngx_module_init`)、处理请求的...

    Windows 平台 Nginx Rtmp模块

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

    Nginx模块源码 nginx-notice-2

    1. **初始化模块**:这部分代码在Nginx启动时执行,用于设置模块的配置信息和全局变量。 2. **配置处理函数**:这些函数负责解析和处理在Nginx配置文件中为模块指定的指令。 3. **事件处理函数**:这些函数处理来自...

    nginx模块开发指南

    模块定义和模块注册则是在模块开发中,将模块功能加入到nginx中的过程,这部分涵盖了如何使模块运行以及与nginx核心通信的方法。 处理模块、过滤模块和负载均衡模块的分析部分,详细地阐述了各个模块类型的具体实现...

    nginx-1.0.2.zip

    HTTP Concat模块(也称为concat模块)是Nginx的一个第三方模块,它的主要功能是合并多个CSS或JavaScript文件为一个请求,从而减少客户端浏览器与服务器之间的网络交互次数,降低页面加载时间,提高网页性能。...

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

    本书旨在帮助读者掌握Nginx的核心概念、架构设计以及如何进行模块开发,从而能够更有效地利用和定制Nginx这一高性能的Web服务器。 Nginx是一款广泛应用的开源Web服务器,以其高效的并发处理能力、轻量级的进程模型...

    docker下nginx配置压缩字体和图片等配置

    Docker中的Nginx服务器作为一个流行的反向代理和负载均衡器,可以通过配置实现对字体、图片等静态资源的GZIP压缩。本文将详细介绍如何在Docker环境下配置Nginx以实现这一功能,主要涉及`docker-compose.yml`、`nginx...

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

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

    nginx-rtmp模块

    Nginx-RTMP模块是一款强大的开源软件扩展,它将Nginx服务器的功能扩展到了实时传输协议(Real-Time Messaging Protocol, RTMP)领域,使得Nginx能够处理流媒体内容,如直播和点播服务。这个模块是由Alexey Kuznetsov...

    nginx waf 模块,nginx waf so 模块,防CC NGINX 模块

    Nginx WAF模块通过结合动态JS人机验证和IP请求速率限制,为Web服务器提供了一道强大的防线,能够有效防御多种类型的网络攻击。使用SO模块的形式,用户可以更加灵活地管理WAF功能,以适应不断变化的安全需求。了解和...

    Nginx模块开发指南

    《Nginx模块开发指南》是一本专注于讲解如何利用C++11和Boost库进行Nginx模块开发的专业书籍。Nginx作为一个高性能的HTTP和反向代理服务器,其强大的可扩展性使得开发者可以通过编写模块来实现特定的功能,以满足...

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

    《Nginx深入理解Nginx模块开发与架构解析(第2版)》是一本针对Nginx技术的深入解析书籍,旨在帮助读者理解和掌握Nginx的核心设计理念以及如何进行高效的模块开发。这本书是该领域经典著作的更新版本,不仅延续了前一...

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

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

Global site tag (gtag.js) - Google Analytics