接着上篇文章 pwa 实现后，有些网站对于首次加载速度有着特别的要求，我会聊一下不同要求下的几种解决方案的优缺点，至于很具体的实现这边不做阐述了。

1、SSR

这种方案现在的主要目的其实是 seo 方面的比较多，但是因为其实服务器端先把要呈现的页面效果返回，然后再加载单页的文件来接手页面，类似快照功能。具体实现可以查看对应技术官网对 ssr 的文档，vue 的实现可以参考这个 vue ssr demo，官网示例由于墙的原因运行不起来。
优点：页面的展示效果会比较快呈现
缺点：因为需要服务器去创建快照所以会消耗服务器性能；还有就是代码需要适配前端和后端，还要保持效果一致比较考验功力；页面的交互依然需要等待单页的 js 加载完成才能操作。

2、cdn

cdn 网络加速技术，不需要进行太多改动，网上的 cdn 服务商也很多。
优点：改动小；对于国际环境引起的效果好；减少服务器带宽
缺点：依赖包可以使用免费的，本身项目如果要用可能需要付费
ps：我这边两个项目使用外链 cdn 后，一个没问题；一个 vue-router 会报错，vue-router 不使用 cdn 引入后就好了，不知道什么原因。还有一些依赖包要求 vue 不能以外链引入，需要特别注意

3、按需加载

这里我把 vue-router 的动态懒加载、语言包的按需加载、组件库的按需加载等等都算了进去，把这些都做了后会发现减少体积也很多，尤其是语言包。
优点：界面显示所需文件的大小会明显减小
缺点：后续跳转时加载其他文件交互变慢，这个需要配合预加载等技术来解决，不能减少首次的加载的文件的数量

4、删除预加载

vue 打包的时候会把没有用的文件以 prefetch、preload 预加载的形式注入到 html 中，在网络比较差的时候多少会影响点显示速度，把这些预加载删除可以加快显示，如果使用了 ServiceWorker，它也会有一个预加载需要处理。
优点：首次的加载的文件数量减少，显示自然就加快了
缺点：因为预加载没有，后面的跳转肯定需要等待网络加载文件了

gzip 压缩不放在里面是因为我认为 gzip 这个是必做的。通用的做法是将公共的依赖包使用免费的 cdn，然后把按需加载做好，然后在index.html中加个 loading 框就好了，只要不是网络差到极限了都是可以的，如果真的差到极限了再把预加载删除。