单页应用首屏问题

刚开始用vue的时候就听有人一直说打包出来的包太大了，导致首次加载特别慢，之后采用了路由懒加载，把每个页面都单独打包，首次加载从来没有觉得慢过。或许是自己做的项目太少不够大，所以没有考虑过这件事。

为什么单页应用首次打开会比较慢，我的理解是全局注入的东西如果比较多，那么第一次加载确实会比较慢。因为我们经常在mainjs里面引入很多插件和UI库，虽然路由懒加载了，首次加载只是加载某一个页面，但是引入的插件和UI库第一次还是要加载的，这就导致首次加载很慢。

我去查了很多文章，自己整理了逻辑上是正确的几个优化方法，只是自己觉得ok，如果不对或者有更好的优化方法欢迎指教：

1、CDN引入，现在经常使用的那些插件库UI库应该百分九十以上都提供了免费的CDN库，当然，如果公司允许，下载下来放到自己的CDN里面当然是最稳妥的。采用CDN引入，再webpack配置一下不打包这些CDN引入的库，很大情况下打包出来的体积肉眼可见的减少了。有人会说，CDN引入了请求变多了，前端优化有一条街就是减少http请求。但是通过CDN引入的请求和请求你那么大一个文件，速度还是CDN多加载几个更快。

2、按需引入，这个应该是所有都知道的，我这边测试了一下一些小的js影响也就几KB，UI库影响就很大了。我全局引入elementUI，打包出来之后首次加载的chunk-vendors.js和去掉之后的chunk-vendors.js大小将近2M。

3、服务端渲染（ssr），以前一直以为服务端渲染只是为了seo，后来才知道解决首屏问题，这才是最大的优化。其实也很好理解，一般浏览器渲染是请求回来之后再通过js渲染页面，而服务端渲染是请求回来直接就是页面。这边顺便说一下为什么有利于seo，单页应用的项目，你右键查看源代码，dom结构只有一个id是root的div，浏览器刚打开扫描dom的时候只有这个div，后面通过js注入了，但是扫描已经结束了，所以不利于seo，而服务器渲染或者以前的多页项目，右键查看源代码，dom都是直接就有的。服务端渲染的缺点应该就是对服务器要求要高一些，因为占用服务器内存比较大一些。还有说是浏览器api无法使用，这个没有具体开发过项目，按道理讲应该有解决的办法。

4、开启gzip压缩，这个我不太确定服务器那边怎么做，压缩之后可以减少体积和网络传输的流量大小，这也很好理解，再大的文件，压缩一下，减少的可不是一丁半点。还有，前端代码也可以进行压缩。

5、优先加载，或者说按模块加载，这一个方法看情况把，像淘宝那些有必要，本人是不建议去做，因为没有必要。简单来说就是一进入页面就把马上看到的先加载，其他的通过滚动也好通过监听也好，进行懒加载。

6、缓存，这个其实也算是很好的一个方法，无非就是强缓存和协商缓存，就是服务器那边配置的。然后做一些loading动画，优化体验感。

应该还是自己做的项目都不够大，所以对这个首页优化还是没有太大的感触，会分享这个也是因为一个总监级别的面试问我的问题，现在想想，当时他说的项目随便都是几百个页面，体积很大，有个什么关系呢，路由懒加载了，首次加载只会加载一个页面，只是首次会加载全局引入的那些库，所以比较慢。

另外，我对ssr也是感触不大，想想，还是觉得为了seo可以去选择，或者真的要那种对首屏优化要到毫秒级的才需要。就我本人来说，打开页面两三秒能开我都是可以接受的，还是只能怪自己对这方面实在是没有太大的追求。不过，ssr是接下来要学习的一个点，说不定什么时候就要使用了。