首屏优化系列（二）

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就很大了，本次项目引入的第三方库如下： ```JavaScript "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压缩，生成压缩文件

安装插件

npm install --save-dev compression-webpack-plugin
复制代码

修改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重新出图）使用方式和为什么使用，已经有人写的很明白了。