Vue頁面首次載入優(yōu)化的全過程
前言
今天是把自己開發(fā)的博客系統(tǒng)發(fā)布到了線上,但就只是把build出來的dist文件夾隨便扔在了云服務(wù)器根目錄下,導(dǎo)致在首次進(jìn)入頁面的時(shí)候非常的慢.所以需要進(jìn)行優(yōu)化.
優(yōu)化前的大小
1.圖片優(yōu)化
之前為了方便開法,背景圖片直接在assets里面扔了一個(gè)jpg,導(dǎo)致加載這張圖片的時(shí)候就用了十幾秒,于是乎我就把圖片上傳空間了,然后改用網(wǎng)絡(luò)地址.
2.禁止生成.map文件
build出來的dist文件夾里面有很多的.map文件,這些文件主要是幫助線上調(diào)試代碼，查看樣式.由于基本都是本地調(diào)試好,線上不需要怎么修改,所以就禁止生成這些文件.
在vue.config.js里面加上這句.
3.路由懶加載
\
4.cdn引入公共庫(kù)
<link rel="stylesheet" rel="external nofollow" >
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
//cdn引入
configureWebpack: {
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
}
網(wǎng)上說可以把import注釋掉,親自操作會(huì)報(bào)錯(cuò),也有資料說不用注釋也不會(huì)打包
一頓操作最后的文件,效果顯著，app.js還是很大
5.終極法寶 GZIP壓縮
做完這個(gè)感覺前四步都是小菜一碟,直接把1.4m的app.js干成一百多kb,其他的都不足掛齒了
configureWebpack: config => {
return {
//配置cdn
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
},
//配置gzip壓縮
plugins: [
new CompressionWebpackPlugin({
test: new RegExp('\.(js|css)$'),
threshold: 10240,
minRatio: 0.8
})
],
}
}
服務(wù)端也要配,不然不認(rèn)識(shí)GZIP文件
//配置GZIP壓縮模塊
const compression = require('compression');
//在所有中間件之前引入
app.use(compression());
最垃圾的服務(wù)器通過以上幾個(gè)優(yōu)化,一樣飛起來了!!!
對(duì)比一下,結(jié)果顯而易見!!!
6.利用vue-router進(jìn)行頁面的懶加載（lazy load）
這里的頁面的懶加載是指，假如我現(xiàn)在訪問A頁面，只會(huì)去請(qǐng)求A頁面里的東西，其他頁面的東西不會(huì)去請(qǐng)求。
具體怎么做，vue-router的官網(wǎng)都寫得很清楚了,有需要的去看一下就懂了：
通過vue-router實(shí)現(xiàn)頁面的懶加載
總結(jié)
到此這篇關(guān)于Vue頁面首次載入優(yōu)化的文章就介紹到這了,更多相關(guān)Vue頁面首次載入優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue如何整合mavon-editor編輯器(markdown編輯和預(yù)覽)
這篇文章主要介紹了Vue整合mavon-editor編輯器(markdown編輯和預(yù)覽)的相關(guān)知識(shí)，mavon-editor是目前比較主流的markdown編輯器，重點(diǎn)介紹它的使用方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue清除地址欄路由參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章，我們通過實(shí)現(xiàn)一個(gè)簡(jiǎn)單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對(duì)Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
如何利用VUE監(jiān)聽網(wǎng)頁關(guān)閉并執(zhí)行退出操作
這篇文章主要給大家介紹了關(guān)于如何利用VUE監(jiān)聽網(wǎng)頁關(guān)閉并執(zhí)行退出操作的相關(guān)資料,因?yàn)轫?xiàng)目中需求,瀏覽器關(guān)閉時(shí)進(jìn)行一些操作處理,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
記錄一個(gè)Vue3簡(jiǎn)易微信右滑刪除邏輯的思路實(shí)現(xiàn)
本文主要介紹了記錄一個(gè)Vue3簡(jiǎn)易微信右滑邏輯的思路實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue3關(guān)鍵字高亮指令的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)關(guān)鍵字高亮指令的相關(guān)資料,w文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-11-11
vue實(shí)現(xiàn)折線圖 可按時(shí)間查詢
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)折線圖，可按時(shí)間查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了vue-cli3全面配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼功能
這篇文章主要介紹了node+vue前后端分離實(shí)現(xiàn)登錄時(shí)使用圖片驗(yàn)證碼,記錄前端使用驗(yàn)證碼登錄的過程，后端用的是node.js，關(guān)鍵模塊是svg-captcha，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-11-11