浅谈VUE首屏性能优化最佳实践

大家在日常开发中，可能会出现首屏加载慢、白屏停留时间长等问题，今天我结合自己项目的实际情况给大家分享一些思路和解决办法

一、众里寻他千"百度"，却在灯火阑珊

我们日常在做研发时，可能~~很少关心首屏性能~~ 问题，感觉不到性能瓶颈。那可能是因为我们的产品或者项目不复杂，还没有达到那个程度，再加上现在成熟的打包工具，自动帮我们做了优化，~~勉勉强强~~还能说的过去。

随着产品或者项目的复杂度高，功能逐步完善，慢慢的就会发现如由老牛拉拖车,越来越慢、首屏的加载速度无法忍受。

针对如何进行首屏优化的方法其实还是比较多，这里列举以下方向：

Vue组件按需加载
减少打包文件体积
减少静态资源请求数量
静态资源开启GZIP加速
静态资源服务器开启缓存
CDN静态资源加载
做骨架屏
完善加载动画

其中：前6项可以真正提升加载速度，后2项目主要是用于提升用户体验

二、探索最佳解决方案

Vue组件按需加载

说到按需加载，Vue项目中主要是通过以下2种实现策略，一种是组件按需加载，一种是路由懒加载，其本质都是组件的需求加载。【控制减少打包资源体积】

组件按需加载

xml 复制代码

<script>

// 定义一个名为MyComponent的组件

const MyComponent = () => import('@/components/MyComponent.vue')

</script>

路由懒加载

dart 复制代码

// 单个路由地址配置

{

path: '/routePath',

name: 'routeName',

component：()=>import('@/views/MyComponent.vue')

}

减少打包文件体积

Vue组件按需加载已经可以优化打包体积，但是在实际的项目开发中我们还可以通过对vue.config.js配置文件的调整，设置相应的文件chunk大小阈值，chunk文件请求个数等。

Vue-Cli3.0:修改插件说明参考地址:cli.vuejs.org/zh/guide/we...
webpack-split-chunks插件配置参考地址:www.webpackjs.com/plugins/spl...

less 复制代码

// vue.config.js 配置

chainWebpack (config) {

config.optimization.splitChunks({

chunks: 'all',// 处理所有类型chunk

minSize: 1024 * 100, // 最小为100kb

maxSize: 0, //不限制单个chunk的最大大小

minChunks: 1,//拆分前模块最少被引用1次

maxAsyncRequests: 5,//异步模块的最大请求数为5

maxInitialRequests: 3//初始模块的最大请求数为3

})

}

模块拆分不是越小越好，也不是越大越快，需要根据项目的实际情况进行相应测试。

我所主导参与的项目比较复杂，引入了很多三方插件库，结合打包静态资源分析工具，把三方库排除打包，利用三方库UMD规范的压缩文件，直接动态挂载至window上供项目直接使用。

静态资源分析工具

按照上述方式进行配置后，我们可以借助打包分析工具，可视化查阅相应的静态资源大小，以及对相应的文件进行再次调整。

package.json 先安装打包分析工具"npm install webpack-bundle-analyzer"

arduino 复制代码

// Vue.config.js 中配置分析工具

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

chainWebpack (config) {

// 生成打包文件-报告

config.plugin('webpack-report').use(BundleAnalyzerPlugin, [

{

analyzerMode: 'static'

}

])

}

配置完成后打包会生成一个可视化的文件链路图，涵盖各个资源的引用情况，项目上可以根据实际需求再次调整，本项目比较复杂，所以涵盖的内容比较多

减少静态资源请求数量

减少静态资源请求，可以从chunks拆分入手【详见：减少打包文件体积配置】，同时我参与的项目挂载了很多三方库，我们通过自定义webpack脚本，在项目每次运行时，把小的三方库进行动态合并，减少请求数据。如：jquery、lodash 等

后续文章将重点说一下这个自动化合并方案

静态资源开启GZIP加速

Gzip是一种数据压缩算法,通过将文本、样式表、脚本和其他可压缩的内容压缩成更小的文件【如：CSS、JS静态资源】从而减少传输数据量。目前的主流浏览器都已经支持Gzip。请求网页时，服务器会将响应的内容进行压缩,并在浏览器端解压缩,实现数据传输的优化。通过开启Gzip压缩,可以加速网站的加载速度,减少带宽使用,提升用户体验。完成GZIP加速按照以下连个步骤即可完成：

Vue项目打包时，对vue.config.js配置支持GZIP；
静态资源服务器【nginx】开启Gzip加速；

Vue项目打包时，对vue.config.js配置支持GZIP

package.json 先安装打包压缩工具

arduino 复制代码

"npm install compression-webpack-plugin"

compression-webpack-plugin插件配置参考地址：webpack.docschina.org/plugins/com...

javascript 复制代码

// vue.config.js 配置开启gzip

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {

const plugins=[

new CompressionPlugin({

algorithm: 'gzip',// 压缩格式

test: new RegExp(`\\.(${['js', 'css', 'json', 'html'].join('|')})$`),// 正则匹配文件后缀

threshold: 1024 * 5,// 压缩阀值超过5KB时才压缩

minRatio: 0.5//压缩比例缩小50%才采用

})]

return {

plugins

}

}

静态资源服务器开启GZIP

通过对Nginx配置gzip,如下简单列举了

bash 复制代码

http {

# 开启GZIP

gzip on;

# GZIP类型

gzip_types text/plain application/x-javascript   application/javascript text/css application/xml text/javascript;

}

开启后，浏览器访问静态资源F12浏览器的Content-Enconding 会显示gzip

CDN静态资源加载

CDN静态资源加载有以下好处：

可以把一些三方资源从别的服务器如公共CDN加载，减少打包文件大小，同时减少了本地服务器负载；
当我们遇到复杂应用，首屏请求的资源非常多，初始化能达到100个请求，在htt1.0协议下 ，浏览器对同一个域名的并发请求数量存在限制，以Google浏览器举例：最大并发请求数为6，不同浏览器之间存在细微差异，通过CDN可以减少并发排队请求时间。

三、快速实践

以上首屏性能优化方案能解决大部分应用的响应性能特别是GZIP，对于静态资源缓存、骨架屏、加载动画后期将会持续更新对应的文章供大家参考。