Vue如何优化首页加载速度

一 页面性能指标

FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.
FCP (First Contentful Paint) 首次内容绘制 标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 元素.
FMP(First Meaningful Paint) 首次有效绘制: 例如，在 YouTube 观看页面上，主视频就是主角元素. 看这个csdn的网站不是很明显, 这几个都成一个时间线了, 截个weibo的看下. 下面的示例图可以看到, 微博的博文是主要元素.

二 性能优化方式

减少请求的次数

1.请求合并：将同一时间需要的js合并，目的是节省dns查找的时间
2.按需加载---（1）单页应用下的按照路由的需要加载 （2）缓存
3.css sprite base64 iconfont
4.cdn托管
5.延迟加载：图片的延迟加载：（就是先不设置img的src属性，等合适的时机（比如滚动、滑动、出现在视窗内等）再把图片真实url放到img的src属性上。） js的延迟加载：

减少量

1.精简代码（tree-shaking）----(1)去除无用的代码 (2)规范些代码的方式 (3)外部cdn的引入
2.懒加载 ---（1）路由的懒加载
3.压缩 ---（1）webpack 压缩UglifyJsPlugin；（2）gzip压缩 (3)图片压缩、JPG优化
4.缓存http代码：---浏览器的强缓存（max-age Etag）和协商(弱)缓存（last-modified）
5.第三方组件---第三方组件作为外部依赖使用，会被打爆进业务代码。
6.按需加载 --- （1）第三方库和工具的按需加载，如echarts （2）选择更优的工具 day.js代替moment （3）可用代码拆分（Code-splitting）只传送用户需要的代

减少内存的消耗

1.减少全局变量；
2.减少全局组件；
3.减少dom操作， 减少DOM访问，使用事件代理

1. css样式放在页面前面
2. 延迟js加载
3. 避免CSS表达式，避免@import

其他

1.预加载：preload（在主渲染前进行预加载） 和prefetch（利用空闲时间）,可用webpackde PreLoadWebpackPlugin插件

1. SSR 预渲染 同构

webpack

1. 遇到webpack打包性能问题，先去npm run build --report，然后根据分析结果来做相应的优化，谁占体积大就干谁
2. webpack提供的externals可以配合外部资源CDN轻松大幅度减少打包体积，尤其对于echarts、jQuery、lodash这种库来说

3.代码拆分

JS 层面细细展开
只传送用户需要的代码。可用代码拆分（Code-splitting）。
优化压缩代码（ES5的Uglify，ES2015的babel-minify或者uglify-es）
高度压缩（用Brotli~q11，Zopfli或gzip）。Brotli的压缩比优于gzip。它可以帮CertSimple节省17%的压缩JS的字节大小，以及帮LinkedIn减少4%的加载时间。
移除无用的代码。用 Chrome DevTools代码覆盖率功能来查找未使用的JS代码。对于精简代码，可参阅tree-shaking， Closure Compiler的高端模式（advanced optimizations）和类似于 lodash-babel-plugin的微调库插件，或者像Moment.js这类库的Webpack的ContextReplacementPlugin。用babel-preset-env & browserlist来避免现代浏览器中已有的转译（transpiling）功能。高级开发人员可能会发现仔细分析Webpack打包（bundle）有助于他们识别和调整不必要的依赖关系。
缓存HTTP代码 来减少网络传输量。确定脚本最佳的缓存时间（例如：max-age）和提供验证令牌（Etag）来避免传送无变化的字节。用Service Worker缓存一方面可以让应用程序网络更加灵活，另一方面也可以让你能够快速访问像V8代码缓存这样的功能。长期缓存可以去了解下Webpack带哈希值文件名（filename hashing）。