一、Spa單頁面的加載過程

1、首先就是html,也就是FP階段

<div id="app"></div>?

頁面在導(dǎo)航后首次呈現(xiàn)出不同于導(dǎo)航前內(nèi)容的時(shí)間點(diǎn),有一個(gè)東西回來渲染在頁面上了

2、然后是靜態(tài)資源css，js，之后解析js，生成HTML,也就是FCP階段，css,js資源加載下來了，首次的內(nèi)容繪制，有一個(gè)大結(jié)構(gòu)了

<div id="app">
? <div class="header"></div>
</div>

比如app根目錄里面有一個(gè)header,div

3、最后,就是FMP,ajax請(qǐng)求數(shù)據(jù)之后,首次有效繪制,就是頁面加載差不多了，但是可能圖片還沒加載出來

4、總結(jié)

從FP到FMP這個(gè)過程全是白屏，可能你的header如果有啥大背景色啊，這個(gè)背景色或許會(huì)出來,ajax之后，才會(huì)真正去解析我們的數(shù)據(jù),把數(shù)據(jù)放入我們的html標(biāo)簽中

二、首頁加載慢的原因

在vue項(xiàng)目中，引入到項(xiàng)目中的js,css都會(huì)被打包進(jìn)入vendor.js,如果引入的第三方庫眾多，最后打包后的vendor.js就會(huì)體積龐大，瀏覽器再加載該文件后才會(huì)進(jìn)入首屏，如果vendor.js體積過大，那么加載的時(shí)間就越久，白屏的時(shí)間就越長(zhǎng)

三、加載速度慢解決方案

1、分離打包第三方資源包

在build文件夾下的webpack.base.conf.js中配置externals可以分離打包第三方資源包，key是依賴包的名稱，value是源碼拋出來的全局變量,這樣打包后這些文件就不會(huì)打包到vendor.js 和app.js中，會(huì)大大減少打包體積。(尤其是你的項(xiàng)目用了多個(gè)三方庫)

這個(gè)做法就是可以不把這些資源打包到bundle和vendor.js中，而是在運(yùn)行時(shí)去獲取需要的依賴和資源，大大減少打包的體積。

2、第三方庫使用CDN引入

在項(xiàng)目開發(fā)中，我們會(huì)用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的組件，來減少所占空間，但也會(huì)有一些不能按需引入，我們可以采用CDN外部加載，在index.html中從CDN引入組件，去掉

其他頁面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是為了避免編譯時(shí)找不到組件報(bào)錯(cuò)。 

//這里是我再項(xiàng)目中的配置
//切記只適用于測(cè)試，要是上線一定是購買付費(fèi)的
<link rel="stylesheet"  />
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

3、vue-router路由懶加載

這個(gè)是相當(dāng)重要的一步,這步會(huì)大大減少打包后的體積，提升加載速度

在訪問到相關(guān)頁面才加載對(duì)應(yīng)的路由和資源，才是正確的，否則全在初始化項(xiàng)目時(shí)加載，那么首屏?xí)r間就會(huì)很久。

舉例說明：

路由懶加載模式配置

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'; ? //這句話可以直接刪掉的，因?yàn)榕渲昧薳xternals
//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壓縮，（這個(gè)需要服務(wù)端配合）

gzip壓縮一定要開，并且服務(wù)端配合開一下，真的很重要。開啟gzip后你會(huì)發(fā)現(xiàn)加載速度有質(zhì)的提升，尤其是你的vendor.js和app.js體積過大的時(shí)候。

（2）、圖片壓縮，目前我才用的是阿里云的圖片處理（付費(fèi)的）效果比較好，或者有條件的話配置一臺(tái)單獨(dú)的圖片服務(wù)器

（3）、盡量使用icon代替圖片

（4）、 js代碼壓縮- - - -(webpack 自UglifyJsPlugin插件壓縮js文件)

（5）、css 代碼壓縮- - - - (采用optimize-css-assets-webpack-plugin插件來壓縮css代碼)

5、不要濫用三方庫

盡量一個(gè)項(xiàng)目只使用一個(gè)庫，不要為了方便使用多個(gè)庫而忽略了性能。

6、去掉編譯中的map文件

為了避免部署打包體積過大，我們通常去掉源文件（就是打包后看不到源代碼),打包后的體積會(huì)小很多，在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, ? ? //這個(gè)設(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）、項(xiàng)目組件化，去掉冗余的代碼

（2）、正式環(huán)境去掉console.log

（3）、index.html頁面中將js文件放到頁面最底部，css文件放在<header>中使用link引入。

這么做的原因是因?yàn)闉g覽器渲染的機(jī)制是自上而下的，如果把js文件放到頭部渲染，等js文件渲染完成才開始繪制頁面，這樣速度會(huì)很慢，并且會(huì)受到css渲染的阻塞，所以要把js文件放到最底部，并且一些沒有關(guān)聯(lián)性的文件可以采用異步加載

四、解決白屏，體驗(yàn)優(yōu)化

上邊已經(jīng)講述了優(yōu)化問題，把所有的優(yōu)化都做完之后 ， 加載速度有了顯著提升，把所有的優(yōu)化都做完之后，加載速度有了顯著提升}把所有的優(yōu)化都做完之后，加載速度有了顯著提升把所有的優(yōu)化都做完之后，加載速度有了顯著提升，但是再網(wǎng)慢的時(shí)候還是會(huì)有白屏，所以再白屏期間加骨架屏和loading就顯得格外重要了。

<body>
? ? //這里親測(cè)有效，放心使用
? ? <div id="app">
? ? ? ?// 我們只需要再這里添加loading圖或者骨架屏，有人會(huì)說怎么控制它的顯示隱藏啊，
? ? ? ?//不用擔(dān)心，再項(xiàng)目初始化完成后會(huì)自動(dòng)替換為你的頁面。
? ? ? ?<div class="self-loading">
? ? ? ? ? 頁面正快馬加鞭趕來，請(qǐng)耐心等待
? ? ? </div>
? ? </div>
</body>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論