Vue頁面首次載入優化的全過程
前言
今天是把自己開發的博客系統發佈到瞭線上,但就隻是把build出來的dist文件夾隨便扔在瞭雲服務器根目錄下,導致在首次進入頁面的時候非常的慢.所以需要進行優化.
優化前的大小
1.圖片優化
之前為瞭方便開法,背景圖片直接在assets裡面扔瞭一個jpg,導致加載這張圖片的時候就用瞭十幾秒,於是乎我就把圖片上傳空間瞭,然後改用網絡地址.
2.禁止生成.map文件
build出來的dist文件夾裡面有很多的.map文件,這些文件主要是幫助線上調試代碼,查看樣式.由於基本都是本地調試好,線上不需要怎麼修改,所以就禁止生成這些文件.
在vue.config.js裡面加上這句.
3.路由懶加載
\
4.cdn引入公共庫
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" 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());
最垃圾的服務器通過以上幾個優化,一樣飛起來瞭!!!
對比一下,結果顯而易見!!!
6.利用vue-router進行頁面的懶加載(lazy load)
這裡的頁面的懶加載是指,假如我現在訪問A頁面,隻會去請求A頁面裡的東西,其他頁面的東西不會去請求。
具體怎麼做,vue-router的官網都寫得很清楚瞭,有需要的去看一下就懂瞭:
通過vue-router實現頁面的懶加載
總結
到此這篇關於Vue頁面首次載入優化的文章就介紹到這瞭,更多相關Vue頁面首次載入優化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!