白屏加载的问题分析
在现代前端应用开发中,我们往往会用 webpack 等打包器进行打包,很多情况下如果我们不进行优化,就会出现很多体积巨大的 chunk,有的甚至在 5M 左右,这些 chunk 是加载速度的杀手。
浏览器通常都有并发请求的限制,以 Chrome 为例,它的并发请求就为 6 个,这导致我们必须在请求完前 6 个之后,才能继续进行后续请求,这也影响我们资源的加载速度。
当然了,网络、带宽这是自始至终都影响加载速度的因素，白屏也不例外.
白屏的性能优化
我们先梳理下白屏时间内发生了什么:
1.回车按下,浏览器解析网址,进行 DNS 查询,查询返回 IP,通过 IP 发出 HTTP(S) 请求
2.服务器返回HTML,浏览器开始解析 HTML,此时触发请求 js 和 css 资源
3.js 被加载,开始执行 js,调用各种函数创建 DOM 并渲染到根节点,直到第一个可见元素产生
解决方式：
- (伪)服务端渲染
- 开启浏览器缓存
- 动态加载 ES6 代码
- 组件懒加载
Vue 首屏加载过慢的解决方法有哪些
vue 首屏加载过慢的原因
- 网速慢肯定会导致首屏加载过慢，但是在这里我们不做讨论
- vue 项目作为一个单页面应用，如果不对路由进行处理，在加载首页的时候，就会将所有组件全部加载，并向服务器请求数据，这必将拖慢加载速度；
- 通过查看 Network，发现整个网站加载试讲长达 10 几秒，加载时间最长的就是 js、css 文件和媒体文件及图片
解决方案
- vue-router 路由懒加载
- 在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用 CDN 外部加载，在 index.html 中从 CDN 引入组件，去掉其他页面的组件 import，
- 关闭 sourcemap，sourcemap 是为了方便线上调试用的，因为线上代码都是压缩过的，导致调试极为不便，而有了 sourcemap，就等于加了个索引字典，出了问题可以定位到源代码的位置。 但是，这个玩意是每个 js 都带一个 sourcemap，有时 sourcemap 会很大，拖累了整个项目加载速度，为了节省加载时间，我们将其关闭掉
- 开启 gzip 压缩，这个优化是两方面的，前端将文件打包成.gz 文件，然后通过 nginx 的配置，让浏览器直接解析.gz 文件。
- 加个 loading 效果：首页加个好看的 loading 阻塞一下，让用户别等的那么心焦。
- 如果首页真的有瓶颈，可以考虑用 node 单独做服务端渲染，而下面的子页面仍用 spa 单页的方式交互。
如何优化 SPA 应用的首屏加载速度慢的问题？
1.将公用的 JS 库通过 script 标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
2.在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的 js 文件；
3.加一个首屏 loading 图，提升用户体验；
