[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静态资源服务器
一、安装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文本编辑器
二、安装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文件。哪里需要才会加载相应的文件
[KISSY5系列]KISSY5安装使用(二)的更多相关文章
- [KISSY5系列]KISSY5安装使用(一)
本文将从零开始安装KISSY环境 一.安装nodejs 从nodejs网站下载nodejs安装 地址: https://nodejs.org/en/download/ 二.下载KISSY 下载地址: ...
- [KISSY5系列]淘宝全终端框架 KISSY 5--从零开始使用
KISSY 是淘宝一个开源的 JavaScript 库,包含的组件有:日历.图片放大镜.卡片切换.弹出窗口.输入建议等 一.简介 KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScri ...
- [转]gitlab cicd (二)系列之安装git-runner rpm安装方式
本文转自:https://blog.csdn.net/qq_21816375/article/details/84308748 本编是继gitlab cicd (一)系列之安装gitlb之后,基于安装 ...
- Django 系列博客(二)
Django 系列博客(二) 前言 今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳. 命令行搭建 Django 项目 创建纯净虚拟环境 在上一篇博客 ...
- Nginx技术研究系列3-OpenResty安装配置
上两篇中介绍了: Ngnix技术研究系列1-通过应用场景看Nginx的反向代理 Ngnix技术研究系列2-基于Redis实现动态路由 发现,应该加一篇OpenResty的安装部署说明,方便大家按图索骥 ...
- Xbin-Store(分布式商城)项目所用Linux服务系列 FastDFS安装(五)
系列 Xbin-Store(分布式商城)项目所用Linux服务系列 MySQL安装(一) Xbin-Store(分布式商城)项目所用Linux服务系列 Redis集群安装(二) Xbin-Store( ...
- IPFS系列 多节点搭建 二
IPFS系列 多节点搭建 二 上一篇介绍了IPFS的分布式点对点超媒体传输协议的背景和安装介绍,本篇将继续指导搭建多节点的IPFS私有网络 文件服务.如果没还没开始搭建IPFS节点的小伙伴, 请戳此链 ...
- Docker 技术系列之安装多版本Mysql5.6和Mysql5.7
大家好,后面的就不是关于MAC专有的内容,基本是跟Java环境,基础技术方面有关.所以这个教程对于在linux系统还是macOS都是通用的,不用担心. 上一篇,我们安装好对应的Docker之后,感受到 ...
- Docker 技术系列之安装Docker Desktop for Mac
终于要进入到Docker技术系列了,感谢大家的持续关注. 为什么要选择Docker?因为Docker 轻巧快速,提供了可行.经济.高效的替代方案.举个例子,安装Nginx,Mysql,Redis等常用 ...
随机推荐
- python 接口自动化测试(三)
1.WriteIni.py import ConfigParser cf = ConfigParser.ConfigParser() cf.add_section("PC_WSDL" ...
- JavaWeb之JSON
一.什么是JSON? JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML ...
- Fundebug上线Node.js错误监控啦
作为全栈JavaScript错误实时监测平台,Fundebug的Node.js实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决Node.js错误,从而提高开发效率,并提升用户体验. ...
- php函数的使用
<?php header("Content-type:text/html; charset=utf-8"); //普通函数 echo "<br/>--- ...
- centos登录时一闪而过,显示module is unknown
原因是修改了在/etc/pam.d/login中加入了: session required /lib/security/pam_limits.so session required pam_limit ...
- nodejs 使用mongoose 操作mongodb
nodejs操作mongodb可以使用mongoose: Mongoose is a MongoDB object modeling tool designed to work in an async ...
- HTTP认证
参考博文:HTTP协议详解 HTTP请求报头: Authorization HTTP响应报头: WWW-Authenticate HTTP认证是基于质询/回应(challenge/response)的 ...
- HTTP相关整理(上)
这次整理HTTP相关知识点的初衷是因为项目中有大量与网络请求相关的知识细节点,所以这次整理的更多的是日常中用得到的点(参考图解HTTP),另外给打算做FE的新人们一些建议:多重视网络这方面的知识.文章 ...
- 添加网站QQ客服链接
http://wpa.qq.com/msgrd?v=3&uin=3475432549&site=qq&menu=yes 将其中的uin值改为客服QQ即可
- Java并发编程:Java线程池
转载自:http://www.cnblogs.com/dolphin0520/p/3932921.html 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题 ...