[KISSY5系列]KISSY5安装使用

Posted 2020-09-15

上篇文章,我们遗留的一个问题就是,请求数量有点多，虽然现在的浏览器的请求资源都是并发的。但是我们还是尽量减少请求量。

但是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文件。哪里需要才会加载相应的文件