为什么网站加载速度总是那么不尽如人意呢？（网站优化篇）

本文已首发于 秋码记录

那些年，但凡一得空，便会去逛逛公园、爬爬山，让那颗浑浊的心灵，能在这大自然中洗涤。

公园树荫下，总是有那么多人，他们或坐于石凳与好友畅聊，或是往那石桌上摆下棋盘，你总能遇到对手。

既然选择放空自己，不管是与好友们闲聊，抑或是棋逢对手，就不要把生活中的不如意或当下的困境说出来，因为这里并不是宣泄消极情绪的好地方。

然而，快节奏生活的当下，鲜有人会在公园逛那么一个下午了。

快节奏的生活，逐渐使人们失去了耐心，同时也让人变得很容易烦躁。

即便是当下人手一部智能手机（更有甚者多达好几部），也不愿花几秒钟来等待访问某个网站，页面却一直处在加载中。用户会毫无犹豫的关掉这个网站。

因为等待让人觉得烦躁，这便是时下快节奏的生活所导致的！

用户评判一个应用（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