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屬性來實現動畫