解决SPA（单页应用）首屏加载速度慢

SPA是目前流行的前端开发模式，相对于传统的多页面用户体验更好，操作更顺畅，开发效率也更高。但是SPA首屏加载速度慢一直是个致命的问题，由于SPA应用首次打开需要一次性加载大量的静态资源，这就导致了加载速度慢的问题，下面将从静态资源优化和渲染优化两个方面来解决。

静态资源优化

1、减少静态资源大小；代码压缩、图片压缩、Gzip（compression-webpack-plugin）、代码拆分（CommonsChunkPlugin）

2、优化HTTP请求

• http缓存
• CDN静态资源加速
• HTTP2，加大请求并发数，提高请求效率

3、优化资源加载时机

• 按需加载 (路由懒加载)
• 懒加载（图片懒加载）
• 预加载（关键文件提前加载，次要文件空闲加载）

4、优化资源加载方式

• SSR
• 分包（小程序分包，H5分包）

页面渲染优化

1、优化HTML代码，js放底部，css外链放顶部

2、减少重绘、重排

3、优化动画，使用requestAnimationFrame，使用transform和opacity属性来实现动画