上篇文章,我們遺留的一個問題就是,請求數量有點多，雖然現在的瀏覽器的請求資源都是併發的。但是我們還是儘量減少請求量。 但是KISSY裡面這個問題我們怎麼解決呢，其實還是從data-config="{combine:false}"說起. ...
目錄:http://www.cnblogs.com/idefav2010/p/6785610.html
上篇文章,我們遺留的一個問題就是,請求數量有點多，雖然現在的瀏覽器的請求資源都是併發的。但是我們還是儘量減少請求量。
但是KISSY裡面這個問題我們怎麼解決呢，其實還是從data-config="{combine:false}"說起.
我們現在把combine設置成true試試
打開index.html發現頁面沒有正常運行,打開調試模式看看,發現報錯了
有沒有註意到請求的鏈接 file:///Users/**/Documents/Git/kissydemo/node_modules/kissy/build/??node.js,util.js,dom/base.js,event-dom/base.js,event-base.js,event-dom/focusin.js,anim/transition.js,anim/base.js,promise.js 這個是什麼鏈接??
其實這個就是要使用阿裡的一個靜態資源合併模塊,需要使用Nginx搭建一個靜態資源伺服器,並使用阿裡開源的Nginx合併模塊
好,下麵我們就來搭建一個Nginx靜態資源伺服器
一、安裝CentOS7
http://101.96.10.26/isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso
使用虛擬機安裝完成後.
修改網路配置:
vi /etc/sysconfig/network-scripts/ifcfg-ens33
把onboot設置為yes
TYPE=Ethernet
BOOTPROTO=dhcp
DEFROUTE=yes
PEERDNS=yes
PEERROUTES=yes
IPV4_FAILURE_FATAL=no
IPV6INIT=yes
IPV6_AUTOCONF=yes
IPV6_DEFROUTE=yes
IPV6_PEERDNS=yes
IPV6_PEERROUTES=yes
IPV6_FAILURE_FATAL=no
IPV6_ADDR_GEN_MODE=stable-privacy
NAME=ens33
UUID=2ae493cc-9228-4cb2-a70d-e0104935b95c
DEVICE=ens33
ONBOOT=yes
重啟CentOS
然後使用 IP ADDR 查看IP地址使用Mac命令鏈接CentOS伺服器
ssh [email protected]
輸入密碼後,登錄到系統
使用 yum updae 更新系統,中間需要輸入Y確認更新,然後等待更新完成.
使用 yum install vim 安裝vim文本編輯器
二、安裝Nginx
CentOS伺服器我們裝好了，現在我們安裝Nginx
1.準備工作
由於nginx的一些模塊依賴一些lib庫，所以在安裝nginx之前，必須先安裝這些lib庫，這些依賴庫主要有g++、gcc、openssl-devel、pcre-devel和zlib-devel 所以執行如下命令安裝
yum install gcc-c++
yum install pcre pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel
yum install git
yum install wget
a)下載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.9.tar.gz
b)下載nginx-http-concat
git clone https://github.com/idefav/nginx-http-concat mv nginx-http-concat /usr/local/src
c)編譯
cd ./nginx-1.9.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
d)配置
創建Nginx賬號ftpuser
adduser ftpuser
passwd ftpuser
使用vim打開nginx的配置文件
vim /usr/local/nginx/conf/nginx.conf
修改
user ftpuser;
server_name 192.168.146.129;
location /kissy/ {
concat on;
root /home/ftpuser/www;
concat_types text/css application/javascript;
concat_max_files 20;
concat_unique off;
}
在Nginx配置文件#gzip on; 下麵加上如下配置來開啟gzip
gzip on;
gzip_min_length 1k;
gzip_buffers 4 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 2;
為了方便上傳文件我們安裝一個ftp服務
yum install vsftpd
配置ftp服務
vim /etc/vsftpd/vsftpd.conf
把匿名登錄取消 anonymous_enable=NO
開啟ipv4監聽 listen=YES 關閉ipv6監聽 listen_ipv6=NO
然後使用 service vsftpd start 開啟ftp服務
最後就是要開放埠
80,20,21
以及被動模式埠:6000-7000
firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --zone=public --add-port=20/tcp --permanent
firewall-cmd --zone=public --add-port=21/tcp --permanent
firewall-cmd --zone=public --add-port=6000-7000/tcp --permanent
重啟防火牆
firewall-cmd --reload
用FileZilla連接伺服器,並創建好 /home/ftpuser/www/kissy 目錄
使用ftp把kissy文件上傳上去
開啟Nginx服務
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
使用chrome訪問 http://192.168.146.129/kissy/seed.js 看看是否訪問的到
如果訪問不到請檢查配置.
三、測試
修改index.html中的路徑 http://192.168.146.129/kissy/seed.js 並把combine設置為true
刷新頁面發現,頁面可以正常運行了
我們來看看chrome調試模式請求的鏈接
http://192.168.146.129/kissy/??node.js,util.js,dom/base.js,event-dom/base.js,event-base.js,event-dom/focusin.js,anim/transition.js,anim/base.js,promise.js
這個就是合併後的鏈接
四、結束語
使用KISSY框架可以動態載入所需要的模塊，不用一次性載入所有的js文件。哪裡需要才會載入相應的文件
