解決vue-cli腳手架打包后vendor文件過(guò)大的問(wèn)題
更新時(shí)間：2018年09月27日 15:18:29 作者：古月蕭
今天小編就為大家分享一篇解決vue-cli腳手架打包后vendor文件過(guò)大的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
大家會(huì)遇到打包后文件很大，導(dǎo)致頁(yè)面初始化加載的速度很慢。會(huì)出現(xiàn)白屏的現(xiàn)象。這一般是你打包的vendor太大的緣故。如果你打包后看到你的vendor文件有700kb以上。你就要考慮怎么處理。
處理這種文件的
1、把不常改變的庫(kù)放到index.html中，通過(guò)cdn引入，比如下面這樣：
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> <script src="https://unpkg.com/mint-ui@2.2.13/lib/index.js"></script> <script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script> <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
然后找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加以下代碼
externals:{
'vue':'Vue',
'element-ui':'ELEMENT',
'mint-ui':'MINT',
'axios':'axios',
'vue-router':'VueRouter',
},
2、通過(guò)路由的懶加載
export default new VueRouter({//這個(gè)為什么用VueRouter 是通過(guò)script標(biāo)簽引入的
mode: 'history',
routes: [
{
path: '/',
redirect: '/master/closestore/today'
},
{
path: '/master/closestore/today',
name: 'CloseingCount',
component: resolve => require(['@/components/ClosingCount'], resolve)
},
]});
以上這篇解決vue-cli腳手架打包后vendor文件過(guò)大的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js國(guó)際化 vue-i18n插件的使用詳解
本篇文章主要介紹了vue.js國(guó)際化 vue-i18n插件的使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本文通過(guò)實(shí)例代碼給介紹了vue使用自定義組件實(shí)現(xiàn)通訊錄功能,需要的朋友可以參考下2018-09-09
Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)
本篇文章主要介紹了Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了Vue底部導(dǎo)航欄的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
element表格組件實(shí)現(xiàn)右鍵菜單的功能
本文主要介紹了element表格組件實(shí)現(xiàn)右鍵菜單的功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3結(jié)合typescript中使用class封裝axios
這篇文章主要為大家介紹了vue3結(jié)合typescript中使用class封裝axios實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue 使用localstorage實(shí)現(xiàn)面包屑的操作
這篇文章主要介紹了vue 使用localstorage實(shí)現(xiàn)面包屑的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue中按鈕操作完刷新頁(yè)面的實(shí)現(xiàn)
這篇文章主要介紹了vue中按鈕操作完刷新頁(yè)面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07