Vue頁面首次載入優(yōu)化的全過程
前言
今天是把自己開發(fā)的博客系統(tǒng)發(fā)布到了線上,但就只是把build出來的dist文件夾隨便扔在了云服務器根目錄下,導致在首次進入頁面的時候非常的慢.所以需要進行優(yōu)化.
優(yōu)化前的大小

1.圖片優(yōu)化
之前為了方便開法,背景圖片直接在assets里面扔了一個jpg,導致加載這張圖片的時候就用了十幾秒,于是乎我就把圖片上傳空間了,然后改用網絡地址.
2.禁止生成.map文件
build出來的dist文件夾里面有很多的.map文件,這些文件主要是幫助線上調試代碼,查看樣式.由于基本都是本地調試好,線上不需要怎么修改,所以就禁止生成這些文件.
在vue.config.js里面加上這句.

3.路由懶加載

\
4.cdn引入公共庫
<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'
}
}
網上說可以把import注釋掉,親自操作會報錯,也有資料說不用注釋也不會打包
一頓操作最后的文件,效果顯著,app.js還是很大

5.終極法寶 GZIP壓縮
做完這個感覺前四步都是小菜一碟,直接把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
})
],
}
}
服務端也要配,不然不認識GZIP文件
//配置GZIP壓縮模塊
const compression = require('compression');
//在所有中間件之前引入
app.use(compression());
最垃圾的服務器通過以上幾個優(yōu)化,一樣飛起來了!!!

對比一下,結果顯而易見!!!
6.利用vue-router進行頁面的懶加載(lazy load)
這里的頁面的懶加載是指,假如我現(xiàn)在訪問A頁面,只會去請求A頁面里的東西,其他頁面的東西不會去請求。
具體怎么做,vue-router的官網都寫得很清楚了,有需要的去看一下就懂了:
總結
到此這篇關于Vue頁面首次載入優(yōu)化的文章就介紹到這了,更多相關Vue頁面首次載入優(yōu)化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue使用v-model封裝el-pagination組件的全過程
通過封裝el-pagination組件開發(fā)自定義分頁組件的類似文章網上已經有很多了,但看了一圈,總是不如意,于是決定還是自己動手搞一個,對v-model封裝el-pagination組件相關知識感興趣的朋友一起看看吧2021-07-07
axios全局請求參數(shù)設置,請求及返回攔截器的方法
下面小編就為大家分享一篇axios全局請求參數(shù)設置,請求及返回攔截器的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3新擬態(tài)組件庫開發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫開發(fā)流程——table組件源碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
DeepSeek?助力?Vue?開發(fā)絲滑的步驟條效果(過程詳解)
本文詳細介紹了如何使用Vue.js和ElementUI創(chuàng)建一個進度條組件,并將所有代碼保存在一個文件夾中,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-02-02

