Vue如何優化首頁加載速度

一 頁面性能指標

FP (First Paint) 首次繪製: 標記瀏覽器渲染任何在視覺上不一樣於導航前屏幕內容以內容的時間點.
FCP (First Contentful Paint) 首次內容繪製 標記瀏覽器渲染來自 DOM 第一位內容的時間點，該內容多是文本、圖像、SVG 甚至 元素.
FMP(First Meaningful Paint) 首次有效繪製: 例如，在 YouTube 觀看頁面上，主視頻就是主角元素. 看這個csdn的網站不是很明顯, 這幾個都成一個時間線了, 截個weibo的看下. 下面的示例圖能夠看到, 微博的博文是主要元素.

二 性能優化方式

減小請求的次數

1.請求合併：將同一時間須要的js合併，目的是節省dns查找的時間
2.按需加載---（1）單頁應用下的按照路由的須要加載 （2）緩存
3.css sprite base64 iconfont
4.cdn託管
5.延遲加載：圖片的延遲加載：（就是先不設置img的src屬性，等合適的時機（好比滾動、滑動、出如今視窗內等）再把圖片真實url放到img的src屬性上。） js的延遲加載：

減小量

1.精簡代碼（tree-shaking）----(1)去除無用的代碼 (2)規範些代碼的方式 (3)外部cdn的引入
2.懶加載 ---（1）路由的懶加載
3.壓縮 ---（1）webpack 壓縮UglifyJsPlugin；（2）gzip壓縮 (3)圖片壓縮、JPG優化
4.緩存http代碼：---瀏覽器的強緩存（max-age Etag）和協商(弱)緩存（last-modified）
5.第三方組件---第三方組件做爲外部依賴使用，會被打爆進業務代碼。
6.按需加載 --- （1）第三方庫和工具的按需加載，如echarts （2）選擇更優的工具 day.js代替moment （3）可用代碼拆分（Code-splitting）只傳送用戶須要的代

減小內存的消耗

1.減小全局變量；
2.減小全局組件；
3.減小dom操做， 減小DOM訪問，使用事件代理

1. css樣式放在頁面前面
2. 延遲js加載
3. 避免CSS表達式，避免@import

其餘

1.預加載：preload（在主渲染前進行預加載） 和prefetch（利用空閒時間）,可用webpackde PreLoadWebpackPlugin插件

1. SSR 預渲染 同構

webpack

1. 遇到webpack打包性能問題，先去npm run build --report，而後根據分析結果來作相應的優化，誰佔體積大就幹誰
2. webpack提供的externals能夠配合外部資源CDN輕鬆大幅度減小打包體積，尤爲對於echarts、jQuery、lodash這種庫來講

3.代碼拆分

JS 層面細細展開
只傳送用戶須要的代碼。可用代碼拆分（Code-splitting）。
優化壓縮代碼（ES5的Uglify，ES2015的babel-minify或者uglify-es）
高度壓縮（用Brotli~q11，Zopfli或gzip）。Brotli的壓縮比優於gzip。它能夠幫CertSimple節省17%的壓縮JS的字節大小，以及幫LinkedIn減小4%的加載時間。
移除無用的代碼。用 Chrome DevTools代碼覆蓋率功能來查找未使用的JS代碼。對於精簡代碼，可參閱tree-shaking， Closure Compiler的高端模式（advanced optimizations）和相似於 lodash-babel-plugin的微調庫插件，或者像Moment.js這類庫的Webpack的ContextReplacementPlugin。用babel-preset-env & browserlist來避免現代瀏覽器中已有的轉譯（transpiling）功能。高級開發人員可能會發現仔細分析Webpack打包（bundle）有助於他們識別和調整沒必要要的依賴關係。
緩存HTTP代碼 來減小網絡傳輸量。肯定腳本最佳的緩存時間（例如：max-age）和提供驗證令牌（Etag）來避免傳送無變化的字節。用Service Worker緩存一方面可讓應用程序網絡更加靈活，另外一方面也可讓你可以快速訪問像V8代碼緩存這樣的功能。長期緩存能夠去了解下Webpack帶哈希值文件名（filename hashing）。