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）。