[性能优化]为了把首页加载速度从15秒降到2秒我都做了哪些事情?

[性能优化]为了把首页加载速度从15秒降到2秒我都做了哪些事情?

前言

对于一个网站来说, 首页打开的速度一定程度上决定了用户的访问量和留存率,很显然,5G时代下的人们是缺乏耐心的,如果一个网页卡十几秒还没开, 估计会弃之,那么怎么才能提高这个速度, 以下提供了五种提升网站速度的方式.

查看网页性能

网上有很多查看性能优化的工具, 最简洁实用的就是chrome里的开发者工具 - network和preformance进行性能分析,另外在build的时候加上--report也能查看到打包后包的大小, 分析占用空间多的包进行优化. 运行npm run build --report, 生成report.html, 在浏览器打开就能看到如下图

1. 路由懒加载

❝

什么是懒加载？
懒加载也叫做延时加载，在网页响应时不立刻请求资源，待页面加载完毕或者按需响应时再加载资源，以达到提高页面响应速度以及节省服务器资源的谜底。网页中常用的懒加载是图片的懒加载，对于类似淘宝一样的多图页面，如果等待所有图片都下载完成再响应用不必然造成页面加载的卡顿。对于JS资源的加载也是同样的道理，大JS的加载会造成JS阻塞，页面出现停止响应的假死状态。因此可以通过按需加载的方式，提高页面首屏的加载速度.

❞

使用: 按业务模块划分

  {
    path: '/manageGroup/add',
    name: 'ManageAddGroup',
    component: () => import(/* webpackChunkName: "manageGroupAdd" */ '/views/Personal/ZGMP/AddGroup/index.vue'),
  },
  {
    path: '/privateChat/list',
    name: 'PrivateChat',
    component: () => import(/* webpackChunkName: "privateChat" */ '/views/Personal/PrivateChat/index.vue'),
  },
  {
    path: '/privateChat/add',
    name: 'PrivateChat',
    component: () => import(/* webpackChunkName: "privateChat" */ '/views/Personal/PrivateChat/add.vue'),
  },

注意: /* webpackChunkName: "privateChat"*/是vue-cli3模板提供的路由懒加载写法, 是指把PrivateChat文件夹下的index.vue和add.vue中的js代码提取到privateChat.[hash].js上，减少入口js文件的体积，提高加载性能。

验证: 是否配置成功

npm run build之后查看dist文件夹,如果有按路由配置里的文件生成对应文件说明配置成功.

解惑: 没生效?

加载首页时我的预期是只会加载app.js和首页路由相关文件,然而却看到了其他路由文件 难道是路由懒加载没生效?
真相是: 「预加载」

❝

什么是预加载?
prefetch: 一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
preload：用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload
(webpack4.6.0以上支持prefetching 特性)

❞

上面的privateChat这些文件属于prefetch，也就是预读取，这些文件加载基本不会影响到当前页面的打开，而且在读取完成后，可以降低页面跳转的等待时间，是一个非常好的功能. 可以看到size一栏里面显示的是prefetch cache, 即预读取缓存,而不是整个文件重新加载.
「那可以关闭/禁用prefetch吗?」 答案是「可以」
Prefetch 将会消耗带宽/流量。如果你的应用很大且有很多 async chunk，而用户主要使用的是对流量较敏感的移动端，那么你可能需要关掉 prefetch 并手动选择要提前获取的代码区块.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 或者,  修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

那怎么手动选择要预读取的文件呢?

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

这样就实现了按需预加载了.

2. 开启gzip压缩,加速资源请求速度

先安装插件compression-webpack-plugin,

npm i --save-dev compression-webpack-plugin

vue.config.js配置插件

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
module.exports = {
  configureWebpack: {
        plugins: [
          new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 10240,
            minRatio: 0.8
          }), 
        ],
    },
}

npm run build查看dist文件,如果看见多了一栏Gzipped则说明本地配置成功.

如果使用了nginx, 那么还需要在nginx.conf文件里面配置.

    server {
      listen 80;
      # gzip config
      gzip on;
      gzip_min_length 1k;
      gzip_comp_level 9;
      gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
      gzip_vary on;
      gzip_disable "MSIE [1-6]\.";
    }

3.关闭sourceMap

sourcemap是为了方便线上调试用的，因为线上代码都是压缩过的，导致调试极为不便，而有了sourcemap，就等于加了个索引字典，出了问题可以定位到源代码的位置。 但是，这个玩意是每个js都带一个sourcemap，有时sourcemap会很大，拖累了整个项目加载速度，为了节省加载时间，我们将其关闭掉。
vue.config.js配置

productionSourceMap: false, //取消.map文件产生

4.不打包库文件

单页面应用加载慢,主要是打包后的js文件过大，阻塞加载, 比如chunk-vendor.js文件, 压缩前加载这个文件需要14秒, 那么如何减小js的体积呢？那就是把库文件单独拿出来加载，不要参与打包。
vue.config.js配置
与configureWebpack同级,配置如下:

chainWebpack: config => {
      // 在这里设置 需要cdn的依赖和插件
      config.set('externals', {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'axios': "axios",
        'moment': "moment",
      });
      //这是一个方法,对config进行了操作之后必须要return出来
      return config
    },

在public/index.html的head标签中可以引入如下的cdn地址: 这里提供一个免费cdn资源网站: bootcdn

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

❝

注意:
1.版本号一定要跟package.json中的一致,否则无效;
2.vue.config.js配置里的这个键值对需要注意下，配置错了这些大文件仍旧参与打包，导致优化失败。
键（key），就是package.json里的插件名称;
值（value），就是对外提供的那个对象，这个最好在引入前查看下js.

❞

5.使用CDN加速

cdn加速推荐看这篇文章: Vue项目构建持续集成阿里云CDN

相关文档推荐:

(1)【性能优化】DNS 预解析

(2)10 秒 到 2秒 超简单的Vue项目首屏优化实践

(3) 首屏加载速度优化