如何通过Vue实例解析优化首屏加载速度？

本文共计1542个文字，预计阅读时间需要7分钟。

在Vue项目中，将所有js和css文件引入至工程中，编译时会打包进vendor.js。浏览器加载该文件后才可开始展示首屏。若引入库众多，则vendor.js体积将相对较大，影响加载速度。

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。

这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor.js文件，基本都是1M以上的的巨大文件，没有用户能忍受5s以上的loading而不关闭页面的，如图所示：

当项目在挂载到服务器上，平均都是10S以上加载出来，好家伙这加载时间，仿佛过了半个世纪，很烦人，心态boom, 开发者甚至都有种想砸电脑的冲动（·#*@#￥……&*）！

我们先来分析下前端加载速度慢原因

1. 首先安装webpack的可视化资源分析工具，命令行执行：

npm i webpack-bundle-analyzer -D

2. 然后在webpack的dev开发模式配置中，引入插件，代码如下：

const BundleAnalyzerPlugin = require('webpack-bundle-plugin').BundleAnalyzerPlugin plugins: [ new BundleAnalyzerPlugin() ]

3. 最后命令行执行npm run build --report, 浏览器会自动打开分析结果，如下所示：

可以看到vue全家桶相关依赖占用了很大的空间，对webpack的构建速度和网站加载速度都会有比较大的影响。