一、什麼是首屏載入 首屏時間（First Contentful Paint），指的是瀏覽器從響應用戶輸入網址地址，到首屏內容渲染完成的時間，此時整個網頁不一定要全部渲染完成，但需要展示當前視窗需要的內容，首屏載入可以說是用戶體驗中最重要的環節 二、載入慢的原因 在頁面渲染的過程，導致載入速度慢的因素 ...
一、什麼是首屏載入
首屏時間（First Contentful Paint），指的是瀏覽器從響應用戶輸入網址地址，到首屏內容渲染完成的時間，此時整個網頁不一定要全部渲染完成，但需要展示當前視窗需要的內容，首屏載入可以說是用戶體驗中最重要的環節
二、載入慢的原因
在頁面渲染的過程，導致載入速度慢的因素可能如下：
-
網路延時問題
-
資源文件體積是否過大
-
資源是否重覆發送請求去載入
-
載入腳本的時候，渲染內容堵塞
三、解決方案
常見的幾種SPA首屏優化方式
- 減小入口文件積
- 靜態資源本地緩存
- UI框架按需載入
- 圖片資源的壓縮
- 組件重覆打包
- 開啟GZip壓縮
- 減小入口文件體積
常用的手段是路由懶載入，把不同路由對應的組件分割成不同的代碼塊，待路由被請求的時候會單獨打包路由，使得入口文件變小，載入速度大大增加，在vue-router配置路由的時候，採用動態載入路由的形式
routes:[ path: 'home', name: 'hoem', component: () => import('./components/home.vue') ]
- 靜態資源本地緩存
後端返回資源問題： 採用HTTP緩存，設置Cache-Control，Last-Modified，Etag等響應頭 採用Service Worker離線緩存 前端合理利用localStorage
- UI框架按需載入
在日常使用UI框架，例如element-UI、或者antd，我們經常性直接飲用整個UI庫
import ElementUI from 'element-ui' Vue.use(ElementUI)
但實際上我用到的組件只有按鈕，分頁，表格，輸入與警告 所以我們要按需引用
import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
