解決vue-cli腳手架打包后vendor文件過大的問題
更新時間：2018年09月27日 15:18:29 作者：古月蕭
今天小編就為大家分享一篇解決vue-cli腳手架打包后vendor文件過大的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
大家會遇到打包后文件很大，導致頁面初始化加載的速度很慢。會出現(xiàn)白屏的現(xiàn)象。這一般是你打包的vendor太大的緣故。如果你打包后看到你的vendor文件有700kb以上。你就要考慮怎么處理。
處理這種文件的
1、把不常改變的庫放到index.html中，通過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、通過路由的懶加載
export default new VueRouter({//這個為什么用VueRouter 是通過script標簽引入的
mode: 'history',
routes: [
{
path: '/',
redirect: '/master/closestore/today'
},
{
path: '/master/closestore/today',
name: 'CloseingCount',
component: resolve => require(['@/components/ClosingCount'], resolve)
},
]});
以上這篇解決vue-cli腳手架打包后vendor文件過大的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue.config.js文件devServer字段的常用選項詳解
在?Vue?CLI?生成的?vue.config.js?文件中,devServer?字段用于配置開發(fā)服務器的選項,本文給大家介紹vue.config.js文件devServer字段的常用選項,感興趣的朋友一起看看吧2023-11-11
Vue表單數(shù)據(jù)修改與刪除功能實現(xiàn)
本文通過實例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實現(xiàn),結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了vue中如何下載文件導出保存到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 實現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗證
這篇文章主要介紹了vue 實現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗證，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue富文本框（插入文本、圖片、視頻）的使用及問題小結,需要的朋友可以參考下2018-08-08
今天小編就為大家分享一篇解決vue attr取不到屬性值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關于vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue+element實現(xiàn)手機號驗證碼注冊的示例
本文主要介紹了vue+element實現(xiàn)手機號驗證碼注冊的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue就是前端上的Java,前端上的C#,有個前端的虛擬DOM引擎,設計理念和Java/C#類似,這篇文章主要給大家介紹了關于Vue新手指南之環(huán)境搭建及入門的相關資料,需要的朋友可以參考下2021-08-08
vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù),結合實例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關操作技巧,需要的朋友可以參考下2019-08-08