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压缩,生成压缩文件
- 安装插件
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重新出图) 使用方式和为什么使用,已经有人写的很明白了。
以上只是我的见解,欢迎指正,共同进步。