[KISSY5系列]KISSY5安裝使用(二)

目錄: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靜態資源服務器

 

1、安裝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 idefav@192.168.146.129

輸入密碼後,登陸到系統

使用 yum updae 更新系統,中間須要輸入Y確認更新,而後等待更新完成.

使用 yum install vim 安裝vim文本編輯器

2、安裝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 看看是否訪問的到

若是訪問不到請檢查配置.

 

3、測試

修改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

這個就是合併後的連接

 

4、結束語

使用KISSY框架能夠動態加載所須要的模塊，不用一次性加載全部的js文件。哪裏須要纔會加載相應的文件