這次帶給大家vuejs專案打包結束後首屏載入優化,vuejs專案打包結束後首屏載入優化的注意事項有哪些,下面就是實戰案例,一起來看一下。
一:使用CDN資源
我們在打包時,會將package.json裡,dependencies 物件裡插件打包起來,我們可以將其中的一些使用cdn的方式加載,例如不想把vue,axios,vuex,vue-router打包到我們專案中,我們需要這樣:
1:開啟webpack.base.conf.js
module.exports = { externals: { ‘vue‘: ‘Vue‘, ‘axios‘: ‘axios‘, ‘vuex‘: ‘Vuex‘, ‘vue-router‘: ‘VueRouter‘ } }
2:開啟router/index.js。註銷掉以下兩行
//import Vue from ‘vue‘ //Vue.use(Router)
3:如果你使用了vuex,把vuex/index.js(命名各有不同)中的Vue.use(Vuex)註銷了
#Vue.use(Vuex)
打包後可能出現的問題
1:被keep-alive包圍的元素無法顯示
原因:暫不明。
解決方法:不用keep-alive
推薦閱讀:Vue專案使用CDN優化首屏載入問題
總結
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是vuejs專案打包結束後首屏載入優化的詳細內容。更多資訊請關注PHP中文網其他相關文章!