nginx中使用nginx-http-concat模塊合併靜態資源文件

2021-01-09 網易

2020-12-31 10:12:00 來源: 西崑雲

舉報

  

  西崑雲這篇文章主要介紹了nginx中使用nginx-http-concat模塊合併靜態資源文件,用以加速網站的CSS、JS等靜態資源載入速度,需要的朋友可以參考下

  首先了解一下 nginx-http-concat,他是一個淘寶的開源Nginx模塊,是一個能把多個CSS和JS合併成一個請求的Nginx模塊,對於Web性能優化非常有意義。
是不是很神奇,只需要一個請求,就可以把需要的CSS/JS文件通過合併的方式把它輸出成一個文件(注意,雖然淘寶有min格式的文件,但是這裡它僅僅是合併多個文件,而不會自動的對其壓縮打包文件)

  首先我們先從Git上下載安裝它

  複製代碼代碼如下:

  
#下載
$ git clone git://github.com/alibaba/nginx-http-concat.git
#移動目錄
$ mv nginx-http-concat /usr/local/src/nginx-http-concat

  
查看原始Nginx版本,這很重要,因為我們需要安裝同一個版本來升級數據

  
#查看版本號以及配置信息(目錄/模塊)
$/usr/local/nginx/sbin/nginx -V
nginx version: nginx/1.3.1
TLS SNI support disabled
configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module

  根據查詢的版本號下載對應版本的nginx,可以到官方下載指定版本:http://nginx.org/download/

  我這裡使用的是1.3.1

  複製代碼代碼如下:

  
$ wget nginx-1.3.1.tar.gz
$ tar zxvf nginx-1.3.1.tar.gz
$ cd nginx-1.3.1
#根據上面-V的信息 加入concat模塊所在路徑 (--add-module=/usr/local/src/nginx-http-concat) 進行編譯
$ ./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之前備份配置文件,防止意外

  複製代碼代碼如下:

  
$ cp -r /usr/local/nginx/conf /root/nginxconf
#編譯安裝
$ make && make install

  
接下來就是配置你的靜態伺服器conf文件

  複製代碼如下:

  
server {
listen 80;
server_name static.dexphp.loc;
index index.html index.htm;
root /mnt/siteroot/static.dexphp.com;
location /static/css/ {
concat on;
concat_max_files 20;//最大合併文件數量是20個
}
location /status {
stub_status on;
access_log off;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js)$ {
expires off;
}
error_log /mnt/siteroot/wwwlogs/static.dexphp.loc.error.log;
access_log /mnt/siteroot/wwwlogs/static.dexphp.loc.access.log;
}

特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺「網易號」用戶上傳並發布,本平臺僅提供信息存儲服務。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相關焦點

  • 【Nginx快速掃盲】nginx入門
    nginx的特點是佔有內存少,並發能力強,事實上nginx的並發能力確實在同類型的網頁伺服器中表現較好,中國大陸使用nginx網站用戶有:百度、京東、新浪、網易、騰訊、淘寶等。nginx可以提供的服務包括:nginx處理請求的邏輯圖:
  • Nginx使用upstream_check_module模塊實現後端節點健康檢查功能
    nginx自帶的針對後端節點健康檢查的功能比較簡單,通過默認自帶的ngx_http_proxy_module 模塊和ngx_http_upstream_module模塊中的相關指令來完成當後端節點出現故障時,自動切換到健康節點來提供訪問。
  • Nginx在高並發下的性能優化點!有這篇就夠了!
    5、開啟高效傳輸模式http {include mime.types; default_type application/octet-stream; …… sendfile on; tcp_nopush on; ……}Include mime.types :媒體類型,include 只是一個在當前文件中包含另一個文件內容的指令。
  • ELK5.X搭建並收集Nginx日誌
    設計用於雲計算中,能夠達到實時搜索,穩定,可靠,快速,安裝使用方便。2.Logstash介紹Logstash是一個完全開源的工具,他可以對你的日誌進行收集、分析,並將其存儲供以後使用(如,搜索),您可以使用它。說到搜索,logstash帶有一個web界面,搜索和展示所有日誌。
  • Nginx for Windows 1.7.10.2 更新 - OSCHINA - 中文開源技術交流...
    http://pan.baidu.com/s/1pJ5l1s3  64 bit: http://pan.baidu.com/s/1kTxmfmJRelease time: 2015-8-20Changelog: 1、add concat module to 32 &
  • njs 0.4.0 發布,nginx 的 JavaScript 腳本語言
    njs 0.4.0 已發布,新增了 js_import 指令,以及在 r.headersOut 中支持多值標頭(multi-valued headers)。
  • 「技術專刊」WebApi部署多伺服器配置Nginx負載均衡
    其特點是佔有內存少,並發能力強,事實上nginx的並發能力在同類型的網頁伺服器中表現較好,中國大陸使用nginx網站用戶有:百度、京東、新浪、網易、騰訊、淘寶等。下面就演示一下配置Nginx的過程1.下載Nginx包:http://nginx.org/en/download.html 注意下載存儲Nginx包的路徑必須為英文;不能帶有中文字符;2.啟動Nginx:直接到下載的Nginx包中雙擊打開「nginx.exe」即可,也可以通過命令啟動
  • Apache和IIS及nginx三大web伺服器,新手站長該如何選擇?
    網站上線時第一件事就是搭建運行環境,首先要選擇的就在伺服器上使用哪一個web伺服器,現在win系統默認自帶IIS而Linux則自帶Apache,如果需要使用nginx則需要單獨安裝。困擾新手站長的就是web服務到底該使用哪一個,目前流行的3大web伺服器有哪些優劣請看使用經驗。
  • 「首席架構師看微服務架構」介紹NGINX的微服務參考架構
    我們構建此參考架構的目標有三個:為客戶和行業提供隨時可用的藍圖,用於構建基於微服務的系統,加速和改進開發創建用於測試NGINX和NGINX Plus中新功能的平臺,無論是內部開發還是外部開發,分布在產品核心中或作為動態模塊為了幫助我們了解合作夥伴系統和組件,我們可以從整體上了解微服務生態系統微服務參考架構也是NGINX客戶專業服務產品的重要組成部分。
  • 這份阿里大牛全網首發600頁Nginx應用運維實戰筆記,真香
    >內容簡介Nginx是一款非常優秀的開源軟體,筆者主要基於自身實際使用Nginx的經驗來分享Nginx的應用和運維方法。第3章Nginx核心配置指令:Nginx的配置是通過在配置文件中調整不同配置指令的指令值實現的。本章介紹了Nginx配置文件的目錄結構及主配置文件nginx.conf的文件結構,並對Nginx的進程及HTTP核心配置的配置指令進行了介紹和配置舉例。
  • njs 0.3.4 與 0.3.5 發布,Nginx 的 JavaScript 腳本語言
    0.3.5 版本修復了 Core 中的兩個 bug:0.3.4 版本中特性更新與功能改進如下: Feature:添加了 Object 簡寫方法和計算屬性名稱。 Feature:添加了 getter/setter 文本支持。 Feature:新增 fs.renameSync()。
  • 交友直播APP源碼開發中,服務端與客戶端的環境搭建
    1、服務端在部署服務端環境其實包含很多東西的,最常用的web服務nginx,資料庫Mysql、Nosql,api開發最多的三種選擇:java環境,需要jdk,tomcat/jbossphp環境,需要安裝php,odplua環境,需要安裝lua、luajit考慮使用緩存技術,則主要包含redis和memcached。
  • 超詳細教程|pandas合併之append和concat(下)
    本篇文章主要介紹了pandas中對series和dataframe對象進行連接的方法:pd.append()和pd.concat(),文中通過示例代碼對這兩種方法進行了詳細的介紹,希望能對各位python小白的學習有所幫助。
  • 最早使用工具的動物:5億年前海蠍用貝殼呼吸
    最早使用工具的動物:5億年前海蠍用貝殼呼吸 2009-04-15 08:28:06 國家地理  【大 中 小】 發表評論     據美國國家地理雜誌報導,一項最新研究稱,世界上最早學會使用工具的動物是生活在5億年前類似蠍子的海洋生物,這種現已滅絕的海洋生物使用其他動物的外殼幫助它們在陸地上呼吸空氣。
  • 微信小程序中如何使用WebSocket實現長連接(含完整源碼)
    這篇文章分享了一個基於WebSocket長連接的微信小程序——簡單的剪刀石頭布小遊戲的製作過程,希望能對想要在微信小程序中使用 WebSocket 的開發者有所幫助。當對方進行拳頭選擇的時候,頭像會旋轉,這個過程使用 WebSocket 會變得簡單快速。4、為什麼要用 WebSocket使用傳統的 HTTP 輪詢或者長連接的方式也可以實現類似伺服器推送的效果,但是這類方式都存在資源消耗過大或推送延遲等問題(詳見文章《新手入門貼:史上最全Web端即時通訊技術原理詳解》)。