Vue SPA 首屏優(yōu)化方案
前言
常規(guī) vue 項(xiàng)目打包后訪問(wèn)，返回一個(gè)只包含 div 的 html，其他內(nèi)容塊都是通過(guò) js 動(dòng)態(tài)生成的。
存在兩個(gè)比較大的問(wèn)題：
- 不利于 seo
- 首屏加載頁(yè)慢，用戶體驗(yàn)不好
本文是自己根據(jù)項(xiàng)目經(jīng)驗(yàn)總結(jié)的方案，如有不足，歡迎指出~
優(yōu)化
SSR
SSR(Server-Side Rendering) 即服務(wù)端渲染，把 vue 組件在服務(wù)器端渲染為組裝好的 HTML 字符串，然后將它們直接發(fā)送到瀏覽器，最后需要將這些靜態(tài)標(biāo)記混合在客戶端上完全可交互的應(yīng)用程序。
使用 ssr 重新部署構(gòu)建項(xiàng)目后：
可以看到返回的內(nèi)容就已經(jīng)包含了首屏內(nèi)容的 html 代碼塊，perfect!~.~
極速傳送門(mén)： 基于vue-cli4.0+Typescript+SSR的小Demo
按需引入
使用 es6 module 進(jìn)行按需引入
1. 路由文件中按需引入組件
# router.index.ts
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
},
],
});
}
2. 靜態(tài)庫(kù)按需引入模塊，而不是全部
如 element-ui 庫(kù)中，我只想用 button 組件 ：
import {
button
} from 'element-ui';
請(qǐng)求優(yōu)化
1. css、js 放置順序
css 文件放 header 中，js 文件放 body前，不過(guò) vue 已經(jīng)幫我們處理好了~
2. 使用字體圖標(biāo)，icon 資源使用雪碧圖
我們知道 http 建立一次連接需要 3 次握手，太多的請(qǐng)求會(huì)影響加載速度
對(duì)不必要的靜態(tài)資源我們應(yīng)該盡量減少，比如頁(yè)面中的 icon 圖標(biāo)，如下騰訊官網(wǎng)的一個(gè)圖片：
直接引入一張完成的圖片，根據(jù) background-position 來(lái)設(shè)置圖片的位置
使用CDN
靜態(tài)資源都上傳到 CDN，提高訪問(wèn)速度
不使用 CDN：
使用 CDN：
可以看到使用 CDN后，會(huì)對(duì)靜態(tài)文件進(jìn)行 GZIP 壓縮， 下載度度極大的提高
入口 chunk 優(yōu)化
拆分入口 chunk 文件，分離出一些靜態(tài)的庫(kù)，既可以加速打包，也可以優(yōu)化加載。
如下，分離了一些靜態(tài)庫(kù)：vuejs、axios、vuex等，可以看到瀏覽器將開(kāi)啟多個(gè)下載線程進(jìn)行下載。若沒(méi)有分離這些靜態(tài)庫(kù)，入口 chunk 將十分巨大，加載速度可想而知~.~
分離一個(gè) element-ui 庫(kù)，dev 環(huán)境我們不用管，prod 環(huán)境下我們才分離，只需要在 vue 打包配置中移除該庫(kù)即可：
# vue.config.js
configureWebpack: {
externals:
process.env.NODE_ENV === 'production'
? {
'element-ui': 'element-ui',
}
: undefined,
},
# index.html 手動(dòng)引入靜態(tài)資源
<script src="/js/element-ui/element-ui.2.11.1.js"></script>
以上就是Vue SPA 首屏優(yōu)化方案的詳細(xì)內(nèi)容，更多關(guān)于Vue SPA 首屏優(yōu)化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- Vue SPA單頁(yè)應(yīng)用首屏優(yōu)化實(shí)踐
- 詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)
- Vue實(shí)現(xiàn)boradcast和dispatch的示例
- vue-cli單頁(yè)面預(yù)渲染seo-prerender-spa-plugin操作
- vuex中store存儲(chǔ)store.commit和store.dispatch的用法
- Vue SPA 初次進(jìn)入加載動(dòng)畫(huà)實(shí)現(xiàn)代碼
- Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果
- vue spa應(yīng)用中的路由緩存問(wèn)題與解決方案
- 解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題
- VUE解決微信簽名及SPA微信invalid signature問(wèn)題(完美處理)
- 詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
相關(guān)文章
這篇文章主要介紹了Vue中的高德軌跡回放問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue里如何主動(dòng)銷(xiāo)毀keep-alive緩存的組件
這篇文章主要介紹了vue里如何主動(dòng)銷(xiāo)毀keep-alive緩存的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的(1)
這篇文章主要介紹了Vue3響應(yīng)式對(duì)象是如何實(shí)現(xiàn)的，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
Vue中組件這個(gè)特性讓不少前端er非常喜歡，我自己也是其中之一，它讓前端的組件式開(kāi)發(fā)更加合理和簡(jiǎn)單。下面這篇文章主要給大家介紹了關(guān)于Vue2中組件間通信的解決全方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
如何使用sm4js進(jìn)行加密和國(guó)密sm4總結(jié)
近期由于公司項(xiàng)目的需要開(kāi)始研究國(guó)密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國(guó)密sm4的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
最近在做APP客戶端掃描PC端二維碼登錄,于是記錄一下實(shí)現(xiàn)過(guò)程,下面這篇文章主要給大家介紹了關(guān)于Vue?PC前端掃碼登錄功能實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
resetFields 對(duì)整個(gè)表單進(jìn)行重置,將所有字段值重置為空并移除校驗(yàn)結(jié)果,下面這篇文章主要給大家介紹了關(guān)于vue中resetFields重置初始值不生效的原因的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue 關(guān)閉當(dāng)前頁(yè)、關(guān)閉當(dāng)前標(biāo)簽tagsView的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 關(guān)閉當(dāng)前頁(yè)、關(guān)閉當(dāng)前標(biāo)簽tagsView,主要有兩種方式，一種是在vue頁(yè)面直接實(shí)現(xiàn)，另一種在js文件中寫(xiě)自定義函數(shù)，在vue頁(yè)面中調(diào)用，本文通過(guò)實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue3 + Element Plus 實(shí)現(xiàn)表格全選/反選/禁用功能(示例詳解)
本文詳細(xì)介紹了如何使用Vue3組合式API和ElementPlus實(shí)現(xiàn)表格的全選/反選/禁用功能,并分享了分頁(yè)保持、視覺(jué)提示優(yōu)化、性能優(yōu)化等技巧,同時(shí),還提供了常見(jiàn)問(wèn)題的解決方案和擴(kuò)展思考,幫助開(kāi)發(fā)者構(gòu)建功能豐富且用戶體驗(yàn)良好的表格組件,感興趣的朋友一起看看吧2025-03-03