阅读 2983

首屏优化系列(二)


title: 首屏优化系列(二) date: 2018-7-14 09:42:30 tags:

  • webpack
  • 图片处理
  • element-ui categories: 前端

需求描述:优化首屏加载速度,减少白屏时间。(优化打包后的文件体积)

继上次的优化手段,测试都是基于本地的,主要涉及到数据请求方面,而这次优化是基于打包后的项目展开,本以为这次项目优化的已经非常不错了,可是打包后vendor.js体积过大,还有首屏的图片过大,导致初次进入页面竟然要等到20秒甚至更多,这期间,页面始终处于白屏状态,在此之前,我并未意识到是自己的问题,还将其归咎于网速的问题。。。

通过CDN的方式引入,减少vendor.js体积

  为什么打包后vendor.js会那么大呢?vendor为厂商的意思,即第三方,webpack将引用的第三方库,打包为一个合集,本次项目引用的第三方库较多,自然打包后的vendor.js就很大了,本次项目引入的第三方库如下:

"dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.2.1",
    "js-cookie": "^2.2.0",
    "qrcode": "^1.2.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vue-lazyload": ""
  }
复制代码

注意 ⚠️ vue-cli中,可以执行'npm run build --report'来生成项目的依赖图,通过这张图,有助于分析文件的大小,组件的执行脚本。

通过分析得知,所引用的库打包后的大小,elemnt-ui非常大,官方文档上讲可以按需引入,结果,打包后文件体积减少了100kb,相较于整个vendor.js来讲,还是差别不大。像是这些相对成熟的库,都是有对应的CDN的,诸如,cndjs、cdn.bootcss、unpkg.com等等,通过CDN的方式引入,速度要比引入我们本地的vendor.js快很多,对比了几种cdn的加载速度后,选择了CDNJS,加载速度比较快。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.3/theme-chalk/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.3/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-lazyload/1.2.6/vue-lazyload.js"></script>
复制代码

在引入这些库的地方就可以去掉引入了,在build/webpack.base.config.js中添加externals:

externals: {
    'vue': 'Vue',
    'axios': 'axios',
    'vue-router': 'VueRouter',
    'element': 'element-ui',
    'vuex': 'Vuex',
    "vue-lazyload": "VueLazyload"
  }
复制代码

开启gzip压缩,生成压缩文件

  1. 安装插件
npm install --save-dev compression-webpack-plugin
复制代码
  1. 修改config/index.js中的productionGzip为true,执行build之后,每个js和css文件会压缩一个gz后缀的文件,服务器端配置gzip,如下:
gzip on;
gzip_types text/plain application/javascriptapplication/x-javascripttext/css application/xml;
复制代码

图片处理

静态图片处理

  对于展示类的首页,不能指望UI帮我们压缩banner,可是好几兆的图片,在服务器带宽不足的情况下,加载是很慢的,测试了一下,一个1M的图片,放到阿里云OSS上,无缓存初次请求需要100ms,200kb的图片通过webpack打包,然后部署到服务器上,请求需要4s,网络环境一致,索性,就把项目所有的静态图片都传到阿里云上了,然后建了一个常量文件,进行管理,不得不说,这样加载速度快了,打包速度也快了不少。

const IMG_URL = {
    // 首页
    HOME: {
        BANNER1: 'https://oss-cn-beijing.aliyuncs.com/images/static-img/xx/xx.jpg'
    },
    COURSE_INDEX: {
        // 头像背景文件
        AVTOR_BG: 'https://oss-cn-beijing.aliyuncs.com/images/static-img/xx/xx.png'
    }
  }
复制代码

icon处理

  在我刚开始实习的时候使用的是css sprite,天啦噜,真的是麻烦哦,每次改一次icon,都需要重新合成,然后就要重新计算位置,在一个项目中用了一次之后,果断放弃了。iconfont非常好用,对于团队合作也很方便,每次UI做完图上传上去就好了,大小,颜色什么的,我们自己控制,尤其是做到一半,要换主题色的话,就更方便了,UI不用重新出图,我们只改一个主题色的变量值就可以了(这种方式不支持多色icon,多色icon,如果想改变颜色,可以手动去改svg里面的色值,通用不需要UI重新出图) 使用方式和为什么使用,已经有人写的很明白了。

  1. 手摸手,带你优雅的使用 icon
  2. 未来必热:SVG Sprite技术介绍

项目依赖关系图

以上只是我的见解,欢迎指正,共同进步。