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優化首屏加載問題

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

vue減少對服務器請求次數

vue-cli有哪些方式縮短首屏加載時間

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com