性能优化

SPA 单页面应用的理解

SPA (Single Page Application) 是指在页面初始化的时候加载相应的 HTML、css、JS 文件，加载完后不会因为用户的操作而进行页面重载或跳转，内容变化利用路由机制实现。

优点：

用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载。

单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。

更进一步，在客户端也可以分解为静态页面和页面交互两个部分。

服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。

不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端。

缺点：

1、首屏加载慢

原因：网络延迟、资源文件过大、重复加载、加载脚本时的阻塞渲染。

优化：

使用路由懒加载，减少入口文件大小，按需加载。
UI 框架按需加载。例如 element-ui 只引入用到的组件，不要全部引入。
设置骨架屏，提升用户视觉体验。
静态资源本地缓存。
防止组件重复下载。在 webpack 中配置 CommonsChunkPlugin，为 minChunks 设置具体的值，表示把使用 n 次及以上的包抽离出来，放入公共依赖文件，避免重复加载组件。
图片资源压缩：雪碧图、使用在线字体图标等。
开启 Gzip 压缩，compression-webpack-plugin 对资源文件进行压缩。
使用 SSR，即在服务端渲染，再发送给浏览器。
复用页面组件，在加载初始页面的时候会完全加载，然后逐渐替换更新新的页面片段。

2、前进后退优化

保存历史路由信息。在页面切换的时候，也可以使用骨架屏，防止空屏出现。

3、SEO 优化

页面的 # 替换成 #!，解决难被搜索引擎抓取到的问题。