使用nginx-http-concat優化網站響應

時間 2019-11-06

標籤使用 nginx http concat 優化網站響應欄目 Nginx 简体版

原文原文鏈接

前言：javascript

咱們在訪問淘寶的時候，會看到代碼中的js和css文件是經過一次請求或得的，咱們知道瀏覽器一次請求只能併發訪問數個資源，這樣的處理錯輸在網絡傳輸層面能夠大大節省時間，這裏使用的技術就是把css、js等靜態資源合併爲一個資源。淘寶使用的tengine是基於nginx的web服務器，從11年末開源。所使用的是mod_concat模塊，合併多個文件在一個響應報文中。php

http1.1下瀏覽器的併發訪問資源數css

IE6 2
IE7         2
IE8 6
Firefox2 2
Firefox3 6
Safari 3,4 4
Chrome 1,2                    6
Opera 9.63,10.00alpha 4 html

1、 CENTOS下安裝使用java

安裝nginx concat,因爲此模塊只能在linux環境中使用，在開發過程當中如何在windows環境下使用在本文下面重點介紹。下面先介紹如何在CentOS中使用，因爲此模塊和nginx配合使用，而nginx通常都是由咱們本身編譯使用的，因此這裏介紹自行編譯方法，關於concat模塊的具體使用技巧，網上不少文章介紹，反而在centos尤爲在windows環境下如何搭建環境，至今沒有一篇很是詳細的文章，這也是本身彙總整理的初衷，若是網上有現成的教程，咱們本身真的就懶得寫了（咱們都是懶人一枚）jquery

1.安裝nginx concatlinux

1 # cd /usr/local/src/
2 # wget http://nginx.org/download/nginx-1.4.2.tar.gz
3 #wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
4 # unzip nginx-http-concat-master.zip
5 # tar -xzvf nginx-1.4.2.tar.gz
6 # cd nginx-1.4.2
7 vi auto/cc/gcc

#將這句註釋掉取消Debug編譯模式大概在174行nginx

#CFLAGS="$CFLAGS -g"git

咱們再配置下nginx編譯參數github

1 ./configure --prefix=/usr/local/app/nginx --user=www --group=www --with-http_stub_status_module --with-http_ssl_module --add-module=../nginx-http-concat-master
2 make
3 make install

固然別忘記增長用戶和用戶組

1 #/usr/sbin/groupadd -f www
2 #/usr/sbin/useradd -g www www

至此組件和nginx編譯完成

2.nginx conf調整

Nginx的控制文件有不一樣的寫法，個人配置文件使用了vhost因此在location段增長以下便可。

1         concat on;
2         concat_max_files 20;
3         concat_unique off;
4         concat_types text/css application/javascript;

例子以下：

 1 ## Try the requested URI as files before handling it to PHP.
 2     location / {
 3 
 4         ## Regular PHP processing.
 5         location ~ \.php$ {
 6             root     /home/webroot;
 7             try_files  $uri =404;
 8             fastcgi_pass   127.0.0.1:9000;
 9             fastcgi_index  index.php;
10             fastcgi_split_path_info ^(.+\.php)(.*)$;
11             fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
12             include        fastcgi_params;
13             #added by james for test
14             fastcgi_buffer_size 128k;
15             fastcgi_buffers 2 256k; # up to 1k + 128 * 1k
16             fastcgi_busy_buffers_size 256k;
17             fastcgi_temp_file_write_size 256k;
18             fastcgi_max_temp_file_size 0;
19             proxy_buffering off;
20             gzip off;
21 
22 
23             fastcgi_connect_timeout 75;
24 fastcgi_read_timeout 600;
25 fastcgi_send_timeout 600;
26         }
27         
28         if ($request_uri  ~* "system/dict"){
29                 rewrite  ^/(.*)/(.*)/(.*)/(.*)$ /$1/index.php last; break;
30             }
31         if ($request_uri  ~* "system/menu"){
32                 rewrite  ^/(.*)/(.*)/(.*)/(.*)$ /$1/index.php last; break;
33                 }
34         if (!-e $request_filename) {
35             rewrite  ^/(.*)/(.*)/(.*)$ /$1/index.php last; break;
36         }
37         
38         concat on;
39         concat_max_files 20;
40         concat_unique off;
41         concat_types text/css application/javascript;
42       } # / location

重啓ninx應用便可生效。

#Killall nginx

#nginx

3.頁面寫法

Concat須要使用兩個？來標明做用域，具體的使用細節網上不少文章已經介紹的很詳細了，這也不是本文的重點，這裏只是給出一個示例。注意啊,css要在上面啊，不清楚的本身搜索下http請求優化。

1 <link rel="stylesheet" type="text/css" href="/??ui/easyui/themes/icon.css,ui/easyui/themes/default/easyui.css,console/portal/resources/css/style.css">
2 <script type="text/javascript" src="/ui/easyui/??jquery.min.js,jquery.easyui.min.js"></script>

2、在windows 下的使用

是否是以爲上面很簡單啊，我也以爲，可是在windows下就悲催了，concat只能在linux環境下，可是如今通常咱們的開發環境就是在windows下，調試起來很是不方便，這就須要咱們有一個能夠在windows 下編譯進去concat模塊的nginx.exe，怎麼辦，只能本身編譯了，由於你們實際項目中採用的nginx中的編譯參數千差萬別，不可能從網上下載一個別人編譯好的就能用的。

在windows下咱們須要使用cygwin，具體這個軟件如何使用，教程一大把，咱們就用它來做爲一個linux通向windows的橋樑。

1. 安裝cygwin

從網上能夠下載已經集成了一部分組件的軟件或者是本身下載的都行，這裏須要注意的是，由於咱們在實際使用中，在不一樣的時候須要不一樣的組件，所以迫切須要一個相似在CENTOS中的yum中的東西，在cygwin中還真有，叫作apt-cyg

1 lynx -source rawgit.com/transcode-open/apt-cyg/master/apt-cyg > apt-cyg
2 install apt-cyg /bin
3 Example use of apt-cyg:
4 apt-cyg install nano

固然apt-cyg還有不少功能，本身apt-cyg –help

2. 在cygwin中編譯nginx

搭建好cygwin環境中，咱們看到大部分的操做和linux中操做不大，可是咱們一旦用上，會發現不少地方有一些小的差別，好比vi咱們的上下鍵和退回鍵徹底不生效，產生了一堆莫名其妙的ABCD,我也是嘗試了半天不起做用，沒辦法用了vim，哎還真還用，別糾結vi了用vim,難怪linux中不少人也說vim更好用。

在編譯nginx以前咱們須要下載一些包，這些固然是用apt-cyg install了，可是注意一些不能一塊兒安裝，那就一個一個安裝好。

openssl、pcre、zlib、automake 、bison 、curl-devel 、flex 、libiconv 、libmcrypt-devel 、libtool 、libxml2 、libxml2-devel 、patchutils 、pcre-devel 、jpeg 、libmcrypt 、libpcre-devel、openssl-devel

在安裝的時候若是還提示缺乏包，那按照提示安裝對應的包便可。

2.1 下載安裝nginx

 1 # cd /usr/local/src/
 2 # wget http://nginx.org/download/nginx-1.4.2.tar.gz
 3 #wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
 4 # unzip nginx-http-concat-master.zip
 5 # tar -xzvf nginx-1.4.2.tar.gz
 6 # cd nginx-1.4.2
 7 vi auto/cc/gcc
 8 #將這句註釋掉 取消Debug編譯模式 大概在174行
 9 #CFLAGS="$CFLAGS -g"
10 #咱們再配置下nginx編譯參數

以上咱們和在centos中徹底同樣，可是注意接下來咱們在編譯的時候—prefix參數不能指定死，由於若是咱們在這裏指定相似/usr/local的路徑，那咱們只能在cygwin環境中使用了，可是咱們是要在windows中使用，這裏就必須使用相對地址，也也是爲何後面咱們的程序文件不能隨便在windows下的盤符的緣由。這裏給出個人編譯參數

1 ./configure \
2 --prefix=. \
3 --user=www \
4 --group=www1 \
5 --with-http_stub_status_module \
6 --with-http_ssl_module \
7 --add-module=../nginx-http-concat-master

2.2 用戶和組處理

先不要執行，這裏咱們使用的用戶www和組www1尚未創建，可是在cygwin中沒有useadd和groupadd找了不少資料，中文的基本沒有才搞清楚，cygwin是使用的windows的用戶和組，這裏咱們先在windows中創建用戶www和組www1，爲何組是www1，萬惡的windows居然不讓組和用戶一個名，不過不要緊

而後在cygwin中執行，就是把windows中的用戶和組同步到cygwin中

1 mkpasswd -l > /etc/passwd 
2 mkgroup -l > /etc/group

執行完畢後cat下passwd和group看用戶和組導入進去沒有

2.3 編譯make錯誤處理

這裏你們可能會遇到各類問題，個人編譯沒問題在make階段報錯提示ngx_user.c文件中的crypt錯誤，找了不少資料沒有發現你們和我同樣的問題，既然是crypt確定是加密，檢查了crypt包也安裝了（apt-cyg install crypt）,最後直接修改了源碼的c文件把加密的這步省略了，就過去了。

1 原始文件：
2   value = crypt((char *) key, (char *) salt);
3 直接修改成：
4   value = (char *) salt);

3. 使用nginx.exe

咱們把編譯好的nginx.exe直接copy到咱們的wnmp環境中，替換nginx文件後是不能直接使用的會提示缺乏不少dll的，按照提示把這些dll拷貝到和nginx同級的目錄便可，咱們的是這些dll

啓動後雖然沒有報錯，可是頁面報404，咱們運行nginx.exe –t發現提示鏈接數錯誤，這裏有不少修改辦法，因爲開發環境沒有那麼多鏈接數，直接修改nginx.conf修改成64

worker_connections 64;

啓動,OK,運行info.php沒問題，一切正常。可是別高興，後面還有問題，由於咱們在windows的開發環境下，咱們的配置參數通常都是d:\work\相似的路徑，info.php能運行起來，咱們的項目不必定能運行起來，由於咱們以前編譯使用的相對路徑，由於../d:\abc其實是不能運行的。由於咱們須要將咱們的工程文件放入到html文件中，同時咱們對應的配置nginx.conf文件修改對應的工程路徑便可。