利用nginx concat模块合并js css
前言:
nginx-http-concat模块是由淘宝网开发的,现在淘宝网合并js和css正是用这个模块,如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,p/fp/2012/fp/directpromo.js?t=2012080620120924.js就是合并了kissy-min.js、global-min.js、core.js、module.js、util.js,directpromo.js等js文件。
环境:
Ubuntu 15.04 64位
步骤:
一、环境准备
安装Nginx之前要先准备好Ubuntu 15的环境,安装好Ubuntu系统之后,还需要安装以下组件:
1、apt-get install openssh-server
Windows用XShell连接,Mac 用自带的Terminal连接
2、sudo apt-get install libssl-dev
3、sudo apt-get install build-essential
编译Nginx和Nginx concat用到
4、sudo apt-get install vim
Linux下强大的编辑器
5、sudo apt-get install git
安装Git用于获取Nginx concat包
6、sudo apt-get install libpcre3 libpcre3-dev
安装Perl库,编译Nginx用到
7、sudo apt-get install curl libcurl3 libcurl3-dev php5-curl
测试Nginx页面
二、安装Nginx
1、下载Nginx
http://nginx.org/download/
mkdir /usr/local/Nginx
cd /usr/local/Nginx
wget http://nginx.org/download/nginx-1.9.9.tar.gz
tar zxvf nginx-1.9..tar.gz
2、下载nginx-http-concat
git clone https://github.com/idefav/nginx-http-concat
mv nginx-http-concat /usr/local/src
三、编译
cd ./nginx-1.9.
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --add-module=/usr/local/src/nginx-http-concat
make && make install
四、配置
打开配置文件
vim /usr/local/nginx/conf/nginx.conf
1、CSS
location /static/css/ {
concat on;
concat_types text/css;
concat_max_files ;
}
2、JS
location /static/js/ {
concat on;
concat_types application/javascript;
concat_max_files 30;
}
3、混合
location /static/all/ {
concat on;
concat_types text/css application/javascript;
concat_max_files ;
concat_unique off;
}
五、启动Nginx
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
六、测试
curl http://localhost/static/??jquery.js,jquery.corner.js
七、开启Gzip
配置Gzip
gzip on;
gzip_min_length 1k;
gzip_buffers 16k;
gzip_disable "MSIE [1-6]\.";
gzip_vary off;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
gzip_comp_level ;
重启Nginx
/usr/local/nginx/sbin/nginx -s reload
测试
/usr/local/nginx# curl -I -H "Accept-Encoding: gzip, deflate" http://192.168.19.128/static/??jquery.js,jquery.corner.js
利用nginx concat模块合并js css的更多相关文章
- 转:利用node压缩、合并js,css,图片
1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...
- Grunt的配置及使用(压缩合并js/css)
Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
- Tengine的concat模块与js、css合并
首先,先走出一个误区 ,下面是tengine-cn邮件列表里的一篇邮件原文:“看了这个例子就了解了,这个所谓的合并请求只是把所有的CSS或JAVASCRIPT请求合并,必须是同一个文件类型的.我开始想 ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- Web性能优化之动态合并JS/CSS文件并缓存客户端
来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...
- maven 压缩、合并 js, css
转载自:http://blog.csdn.net/fangxing80/article/details/17639607 我们知道在 Web 应用开发中为了提高客户端响应速度,需要将页面使用的资源最小 ...
- nginx concat模块配置 页面返回400 bad request
在1.4.x版本的nginx没有发现这个问题,但是在1.5.x版本就遇到了这个问题 由于Nginx在新版本中,使用了标准的 MIME-Type:application/javascript.而在ngi ...
- nginx js、css多个请求合并为一个请求(concat模块)
模块介绍 mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块.不过塔暂时没有包含在nginx中.这个模块类似于apache中的modconcat. ...
- 引用:使用grunt 压缩 合并js、css文件
引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt 目录.png 2.在grunt目录下创建一个 src目录,存 ...
随机推荐
- iOS 导航栏不可点击
self.navigationController.navigationBar.userInteractionEnabled = NO;
- Round Numbers(poj 3252)
题意:算出区间内二进制中0的个数大于等于1的个数的数字有多少个 /* 本来以为用数位DP搞,但是组合数更简单. 我们设n的二进制长度为len. ①:先考虑长度小于len的数字. 这里以数字22为例,二 ...
- 按住ctrl键可以在新窗口打开图片
用firebug查看网页时,img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示,并可右键另存为到本地目录
- css3 翻牌效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- zabbix3.0.4 部署History
[root@zabbix-Test ~]# history 1 passwd root 2 exit 3 yum install ntpd* 4 yum inst ...
- 定制自己的Unity脚本模板
有时候想给脚本添加符合自己编程习惯的内容,或是一些个性化信息.而作为一个多多少少有点强迫症的人,这种东西要加就得每个脚本都加上,不然看着多不爽! 于是就得每添加一个脚本就去修改一下,很麻烦. 但是,在 ...
- Mac下启动MySQL出现错误“the /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' user”解决
错误如下: Warring the /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' user 这应该是某 ...
- vue.js中ajax请求
<div id="app"> <table style="border-collapse: collapse"> <thead&g ...
- Git学习之路(1)-Git简介
▓▓▓▓▓▓ 大致介绍 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds ...
- 2017《JAVA技术预备作业》 1502 陈明宇
1.阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我期望的师生关系应该是亦师亦友的关系,美丽的校园是我们学生居住生活最久的地方而老师则是和我们接触最为密切的人.在课堂上,老师是辛勤的园丁,向我 ...