vue?首頁加載,速度優(yōu)化及解決首頁白屏的問題
一、Spa單頁面的加載過程
1、首先就是html,也就是FP階段
<div id="app"></div>?
頁面在導(dǎo)航后首次呈現(xiàn)出不同于導(dǎo)航前內(nèi)容的時間點,有一個東西回來渲染在頁面上了
2、然后是靜態(tài)資源css，js，之后解析js，生成HTML,也就是FCP階段，css,js資源加載下來了，首次的內(nèi)容繪制，有一個大結(jié)構(gòu)了
<div id="app"> ? <div class="header"></div> </div>
比如app根目錄里面有一個header,div
3、最后,就是FMP,ajax請求數(shù)據(jù)之后,首次有效繪制,就是頁面加載差不多了，但是可能圖片還沒加載出來
4、總結(jié)
從FP到FMP這個過程全是白屏，可能你的header如果有啥大背景色啊，這個背景色或許會出來,ajax之后，才會真正去解析我們的數(shù)據(jù),把數(shù)據(jù)放入我們的html標簽中
二、首頁加載慢的原因
在vue項目中，引入到項目中的js,css都會被打包進入vendor.js,如果引入的第三方庫眾多，最后打包后的vendor.js就會體積龐大，瀏覽器再加載該文件后才會進入首屏，如果vendor.js體積過大，那么加載的時間就越久，白屏的時間就越長
三、加載速度慢解決方案
1、分離打包第三方資源包
在build文件夾下的webpack.base.conf.js中配置externals可以分離打包第三方資源包，key是依賴包的名稱，value是源碼拋出來的全局變量,這樣打包后這些文件就不會打包到vendor.js 和app.js中，會大大減少打包體積。(尤其是你的項目用了多個三方庫)
這個做法就是可以不把這些資源打包到bundle和vendor.js中，而是在運行時去獲取需要的依賴和資源，大大減少打包的體積。
2、第三方庫使用CDN引入
在項目開發(fā)中，我們會用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的組件，來減少所占空間，但也會有一些不能按需引入，我們可以采用CDN外部加載，在index.html中從CDN引入組件，去掉
其他頁面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是為了避免編譯時找不到組件報錯。
//這里是我再項目中的配置 //切記只適用于測試，要是上線一定是購買付費的 <link rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
3、vue-router路由懶加載
這個是相當重要的一步,這步會大大減少打包后的體積，提升加載速度
在訪問到相關(guān)頁面才加載對應(yīng)的路由和資源，才是正確的，否則全在初始化項目時加載，那么首屏?xí)r間就會很久。
舉例說明：
路由懶加載模式配置
let routes = [
? ? {
? ? ? ? path: '/map', //地圖
? ? ? ? name: 'map',
? ? ? ? component: resovle => require(['@/pages/map'],resovle),
? ? ? ? meta: { noRequiresAuth: true },
? ? },
? ? {
? ? ? ? path: '/redirectLogin', //支付回跳
? ? ? ? name: 'redirectLogin',
? ? ? ? component: resovle => require(['@/pages/site/redirectLogin'],resovle),
? ? ? ? meta: { noRequiresAuth: true },
? ? }
]非----懶加載模式配置 router.js配置
import Vue from 'vue'; ? //這句話可以直接刪掉的，因為配置了externals
//import Router from 'vue-router';
//import login from '@/pages/site/login';
采用require方式代替import
const Router = require('vue-router');
const login = require('@/pages/site/login');
Vue.use(Router);
let routes = [
? ? {
? ? ? ? path: '/login', //登陸
? ? ? ? name: 'login',
? ? ? ? component: login,
? ? ? ? meta: { noRequiresAuth: true },
? ? },
]4、靜態(tài)資源壓縮，代碼壓縮，圖片壓縮
（1）、開啟gzip壓縮，（這個需要服務(wù)端配合）
gzip壓縮一定要開，并且服務(wù)端配合開一下，真的很重要。開啟gzip后你會發(fā)現(xiàn)加載速度有質(zhì)的提升，尤其是你的vendor.js和app.js體積過大的時候。
（2）、圖片壓縮，目前我才用的是阿里云的圖片處理（付費的）效果比較好，或者有條件的話配置一臺單獨的圖片服務(wù)器
（3）、盡量使用icon代替圖片
（4）、 js代碼壓縮- - - -(webpack 自UglifyJsPlugin插件壓縮js文件)
（5）、css 代碼壓縮- - - - (采用optimize-css-assets-webpack-plugin插件來壓縮css代碼)
5、不要濫用三方庫
盡量一個項目只使用一個庫，不要為了方便使用多個庫而忽略了性能。
6、去掉編譯中的map文件
為了避免部署打包體積過大，我們通常去掉源文件（就是打包后看不到源代碼),打包后的體積會小很多，在config文件夾下的index.js文件中
module.exports = {
? ? build: {
? ? ? ? env: build_env,
? ? ? ? index: path.resolve(__dirname, '../dist/index.html'),
? ? ? ? assetsRoot: path.resolve(__dirname, '../dist'),
? ? ? ? assetsSubDirectory: 'static',
? ? ? ? assetsPublicPath: './',
? ? ? ? productionSourceMap: false, ? ? //這個設(shè)置為false就是去掉源文件
? ? ? ? // Gzip off by default as many popular static hosts such as Surge or Netlify
? ? ? ? // already gzip all static assets for you. Before setting to `true`, make sure
? ? ? ? // to: npm install --save-dev compression-webpack-plugin
? ? ? ? productionGzip: true, ? ? ?//開啟gzip
? ? ? ? productionGzipExtensions: [
? ? ? ? ? ? 'js', 'css'
? ? ? ? ],
? ? ? ? // Run the build command with an extra argument to View the bundle analyzer
? ? ? ? // report after build finishes: `npm run build --report` Set to `true` or
? ? ? ? // `false` to always turn it on or off
? ? ? ? bundleAnalyzerReport: process.env.npm_config_report
? ? },
? ? }7、代碼層面的優(yōu)化
（1）、項目組件化，去掉冗余的代碼
（2）、正式環(huán)境去掉console.log
（3）、index.html頁面中將js文件放到頁面最底部，css文件放在<header>中使用link引入。
這么做的原因是因為瀏覽器渲染的機制是自上而下的，如果把js文件放到頭部渲染，等js文件渲染完成才開始繪制頁面，這樣速度會很慢，并且會受到css渲染的阻塞，所以要把js文件放到最底部，并且一些沒有關(guān)聯(lián)性的文件可以采用異步加載
四、解決白屏，體驗優(yōu)化
上邊已經(jīng)講述了優(yōu)化問題，把所有的優(yōu)化都做完之后 ， 加載速度有了顯著提升，把所有的優(yōu)化都做完之后，加載速度有了顯著提升}把所有的優(yōu)化都做完之后，加載速度有了顯著提升把所有的優(yōu)化都做完之后，加載速度有了顯著提升，但是再網(wǎng)慢的時候還是會有白屏，所以再白屏期間加骨架屏和loading就顯得格外重要了。
<body> ? ? //這里親測有效，放心使用 ? ? <div id="app"> ? ? ? ?// 我們只需要再這里添加loading圖或者骨架屏，有人會說怎么控制它的顯示隱藏啊， ? ? ? ?//不用擔心，再項目初始化完成后會自動替換為你的頁面。 ? ? ? ?<div class="self-loading"> ? ? ? ? ? 頁面正快馬加鞭趕來，請耐心等待 ? ? ? </div> ? ? </div> </body>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue父子組件的通信的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue制作抓娃娃機，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
在我們的印象使用中，vue除了寫業(yè)務(wù)代碼沒有特別新奇的功能了，今天就來看看如何自動化生成vue組件文檔2021-06-06
vue中關(guān)于redirect(重定向)初學(xué)者的坑
這篇文章主要介紹了vue中關(guān)于redirect(重定向)初學(xué)者的坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝,主要包括安裝axios及簡單使用配置方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue代碼分割的實現(xiàn)(codesplit)，做了代碼分割后，會將代碼分離到不同的bundle中，然后進行按需加載這些文件，需要的朋友可以參考下2018-11-11
vue中$router.back()和$router.go()的用法
這篇文章主要介紹了vue中$router.back()和$router.go()的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了淺談vue.use()方法從源碼到使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue中利用three.js實現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12