白屏加载的问题分析

在现代前端应用开发中,我们往往会用 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 图，提升用户体验；

首屏加载