优化网页的加载速度

网站优化#

关于网站优化的事情都是老生常谈的事情了，尤其是在面试的时候，我估计这个问题也是出现的频率比较高的热门问题之一。下面就是稍微介绍一下，我是怎么优化我的个人网站的。

常用的CDN加速 http1.1有一个对站点请求数量的限制，同一时间发出过多的资源请求，它会有一个排队等待的过程，打开浏览器的network面板，就像下面这一张图

preview

科普一下

这个就是http资源加载的分析图，在请求完全结束之后，计时结束进度条不再变化。它的几个属性代表的意思如下：

Queued -- 等待排队的时间，从整个页面的第一个http请求开始计算时间
Started -- 发出请求的时间，这个时间是正式发出请求之前的时间节点
Queueing -- 发出请求的正式时间，这个时候开始发出真正的http请求
Connection Start -- 阻塞的时间，可能会有dns解析，反向代理，ssl解析加载
Request/Response
- request send -- 发出请求耗时
- Waiting -- 等待响应的耗时，时间过长就要考虑一下后台api的优化
- Content Download -- 下载资源的耗时，到这里请求结束

优化: 这里的优化就是将资源分散到不同的域名下，大文件需要压缩，似乎项目打包出来dist文件下的文件都可以发布到cdn，可以使用webpack下的public指定发布的静态资源地址,例如:

module.export = {
    public: 'https://src.**.com/static/js/[hash:8].js
}

我在服务器端开了一个src开头的二级域名，作为我的静态文件服务器，现在我全部的图片文件就全部放在了这个服务器里面，所以全部的静态资源可以通过src这个资源域名访问。

Gzip压缩大文件

注意: 需要前后端配合

webpack有一个插件: compression-webpack-plugin, 在webpack.config.js的文件中做如下配置：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.export = {
    plugins: [
       new CompressionWebpack({
         test: /\.(js|css|png|svg)$/,
         threshold: 10240,
         minRatio: 0.9
      })
   ]
}

太小的文件就不要压缩呀，小文件压缩有可能比源文件更大，别问我为什么，因为我也是听说的没有具体实践。

执行打包的命令之后，如果你配置成功的话，就可以看到已经压缩的文件了。 preview

下面配置一下服务器我用的是Nginx

http { # http模块
  gzip on;
  gzip_http_version 1.1; #有的不支持gzip哦
  gzip_min_length 1k;
  gzip_comp_level 5; # 最高为9，最低为1，取中间
  gzip_types application/javascript image/bmp text/css; # 可以配置很多类型
}

配置以后记得重启服务器

nginx -t # 检查一下语法
# nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
# nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

nginx -s reload

ps -el|grep nginx # 看一下nginx启动了没有

如果你配置成功了，并且重启了服务器，再次打开你的网站应该可以看到的大文件加载使用了gzip文件如下图:

preview

React官网的代码分割

在React的某一次更新之后，它有了一个方法React.lazy(),就是动态的引入静态文件，类似于Vue中的路由懒加载，但是最大的区别就是，在react中任意模块都可以使用，使用的时候需要配合一下标签,它必须有一个fallback函数返回一个Jsx，具体的看官网。

import React from 'react'
const LazyCompoennt = React.lazy(() => import('....'))

export default () => {
  <Suspense fallback={<div>Loading...</div>}>
     <LazyComponent />
  </Suspense>
}

图片的懒加载

npm上各种懒加载的插件，可以自己搜了用，这里我贴一个我的实现。其原理就是准备一张压缩过的小图片，作为ScrollWrapper里面的全部图片src源，其真实的url资源地址保存在data-src属性中, 监听scrollWrapper的滚动事件，图片进入视窗的时候就用data-src去替换src。如下:

  <img  src='https://src.***.com/cover.png' data-src='target_url' />

下面是我的实现**lazy.js**，很简单不过50行代码 preview