那些年,但凡一得空,便会去逛逛公园、爬爬山,让那颗浑浊的心灵,能在这大自然中洗涤。
公园树荫下,总是有那么多人,他们或坐于石凳与好友畅聊,或是往那石桌上摆下棋盘,你总能遇到对手。
既然选择放空自己,不管是与好友们闲聊,抑或是棋逢对手,就不要把生活中的不如意或当下的困境说出来,因为这里并不是宣泄消极情绪的好地方。
然而,快节奏生活的当下,鲜有人会在公园逛那么一个下午了。
快节奏的生活,逐渐使人们失去了耐心,同时也让人变得很容易烦躁。
即便是当下人手一部智能手机(更有甚者多达好几部),也不愿花几秒钟来等待访问某个网站,页面却一直处在加载中。用户会毫无犹豫的关掉这个网站。
因为等待让人觉得烦躁,这便是时下快节奏的生活所导致的!
用户评判一个应用(APP)、网站的体验效果好坏,其中很重要的一点便是,产品的响应速度是否能控制在用户接受的范围之内(除非你的应用或网站是知名的,如:阿里云、腾讯云等网站响应速度何止是慢。)
网站优化方案
无论是简单的企业门户网站,还是看似复杂的博客网站,它们总是由html
、javascript
、css
、图片
文件等构成的,而呈现在用户眼前,便是通过这些文件拼凑
而来的一个页面。
提升服务器带宽
在你访问网站
时,网站文件所在的服务器
在接受到你的指令
后,是要将服务器
上相对应的html
、javascript
文件等响应给你,也就是浏览器
请求这些资源
(可以说从服务器
下载这些资源)。
我们深知,但凡从网络上下载任何文件,它总是跟你的网速有关的,若你带宽
是100M
的话,那么下载那是很快。当然咯,网站所搭载的服务器带宽
若不是很好,网站加载慢那是再所难免的!这便是网站优化的方案之一,关于这一块,是需要花费的成本的。
使用 CDN
有没有那么一种可能,那就是你把服务器的带宽
提升上去了,可用户访问你的网站,依旧是页面处于正在加载中
。那可能是浏览器访问你的网站,需要请求很多javascript
、css
文件等资源,虽然用户与你的网站服务器同属在国内,但不免由于地域的缘故。
为了解决用户在不同地域访问你的网站,能以用户所能承受的加载时间范围内,渲染出网站页面出来,那么,这样对用户来说,你的网站算是一个用户体验不错
的网站。
我们既然知道了,导致网站加载慢的症结是javascript
等资源,那么,我们可以将这些文件托管在距离用户较近区域的节点
上,让用户在访问你的网站,不再是请求服务器的javascript
等资源,而是从歫用户较近的节点
上读取这些文件,从而使得用户所在的区域访问你的网站便快了。
没错,这便是内容分发
(CDN
)。它不单是在国内每个区域设有节点
,还遍布全球
,你可以把原先放在服务器上的javascript
等文件,迁移到CDN
上,这样一来,继而减轻了服务器的”压力“,又能让你的网站在用户眼前加载起来快如闪电
。当然咯,这也需要你额外付出成本的!
压缩静态资源
若你不想再额外花钱的话,那么,就要从javascript
、css
等文件大小上来考虑,相对于网络传输来讲,当然是文件小一些,它自然快于大文件的传输速度了。
虽然,市面上有公共CDN
,但那也都是些知名
的第三方library
,自己的网站,总是离不开自定义的javascript
、css
等文件。
对于压缩方式可以选择,网上在线压缩,前提是你只定义了那么一两个javascript
、css
文件。
可若是你为你的网站自定义了好些个javascript
、css
,那么,在线压缩就不适合了,一来文件多了,处在起来还是比较麻烦的,二来文件一多,处理起这些繁杂的工作,总是让人很是烦躁。
既然在线压缩,处理多个文件,委实使人力不从心,那么,我们可以借助程序来实现文件压缩啊。
Gulp 压缩静态资源
至于gulp
是什么呢? https://www.gulpjs.com 介绍说它是自动化构建你的项目,减少你浪费的时间,从而创造出更大的价值。
(虽然口气有点大)
首先,你的确保你的电脑是否安装了node.js
,如果没有,那么可以去 https://nodejs.com 进行下载安装。安装nodejs
还是比较简单的,一路Next
。
若你的电脑已安装过nodejs
的话,那么,你可以使用以下命令来检查,你电脑安装的nodejs
版本。
node --version
在nodejs
高版本,都会在你安装了nodejs
之后,同时默认的安装了npm
(用于管理nodejs
的library
,就像java
的maven
、gradle
,PHP
的composer
,golang
的module
等一样),和npx
,同样的话,可以使用以下命令来检查npm
、npx
的版本。
npm --version
npx --version
随后,我们通过以下命令来全局
安装gulp
。
npm install --global gulp-cli
创建项目
我们可以在一个空文件下,再次新建一个空文件夹,而后通过npm init
来初始化项目,这条命令能为我们在当前文件夹下自动生成一个package.json
文件。
npm init
之后我们再项目安装gulp
依赖,来为项目实现自动化构建
。
npm install --save-dev gulp
创建 gulpfile.js
文件来压缩静态资源
我们在项目根路径下,新建一个名为gulpfile
的javascript
文件,文件名必须叫gulpfile
这个名称,若你问我为什么?那我只能回答你,那是因为gulp
规定的,也就是
gulp-cli会读取这个名为
gulpfile的
javascript文件,若你改成了其它名称,那么
gulp-cli是无法找到名为
gulpfile`文件的,那么也就无法进行下去了。
在编写gulpfile.js
文件之前,我们的项目需要安装几个依赖
,它们适用于压缩javascript
、css
文件的。
npm install --save-dev gulp-uglify
npm install --save-dev gulp-minify-css
安装好library
后,那么,我们可以对gulpfile.js
进行编辑了。
const { src, dest, series } = require('gulp');
const uglify = require('gulp-uglify');
const minifyCss = require("gulp-minify-css");
//在 gulp 里 这就是一个任务
function miniCss () {
return src('src/css/*.css')
.pipe(minifyCss())
.pipe(dest('dist/css/'));
}
function miniJs () {
return src('src/js/*.js')
.pipe(uglify())
.pipe(dest('dist/js/'));
}
//导出任务 以便在 gulp-cli 中执行
exports.default = series(miniCss,miniJs)
编辑好了gulpfile.js
文件后(别忘了,保存它),打开Terminal
,进行入到当前项目路径下,也就是gulpfile.js
文件所在的路径下。
gulp