上篇文章,我们遗留的一个问题就是,请求数量有点多，虽然现在的浏览器的请求资源都是并发的。但是我们还是尽量减少请求量。
但是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文件。哪里需要才会加载相应的文件