vue打包上傳到服務(wù)器加載慢的優(yōu)化方式
項(xiàng)目打包后加載時(shí)間及大小
1.下圖為vender.js加載時(shí)間，會(huì)發(fā)現(xiàn)vebder.js 大小將近250k，加載時(shí)間藍(lán)條很長(zhǎng)
解決方式
我同時(shí)用了兩種解決方式，來(lái)減少vender.js的大小
1.路由懶加載
vue-router路由懶加載（解決vue項(xiàng)目首次加載慢）也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。
簡(jiǎn)單的說(shuō)就是：
進(jìn)入首頁(yè)不用一次加載過(guò)多資源造成用時(shí)過(guò)長(zhǎng)?。。?/p>
像vue這種單頁(yè)面應(yīng)用，如果沒(méi)有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過(guò)多，時(shí)間過(guò)長(zhǎng)，會(huì)出現(xiàn)長(zhǎng)時(shí)間的白屏，而運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力，減少首頁(yè)加載用時(shí)
解決方式
在路由設(shè)置文件router.js 文件中將import 改成require
原有文件
2.將外部資源通過(guò)CDN引入
僅針對(duì)vue3.0 必須在div.app上面
步驟2：在vue.config.js 中進(jìn)行配置
這里要注意vue3.0 是沒(méi)有這個(gè)文件的，
1.所以我們需要在根目錄手動(dòng)創(chuàng)建vue.config.js文件。
2.在configureWebpack：中通過(guò)externals進(jìn)行配置，格式為‘XXX’：‘SSS’ 這里 XXX 為引入資源的名稱(chēng)，’SSS‘表示模塊提供給外部引用的名稱(chēng)。 這里要注意’SSS‘ 是固定格式 不可自定義 ，否則報(bào)錯(cuò) SSS：undefined…
3.配置完畢以后，一定要先重新run 項(xiàng)目， 否則會(huì)報(bào)錯(cuò)，因?yàn)関ue.config.js并非實(shí)時(shí)加載。
configureWebpack : {
externals: {
'vue':'Vue',
'vue-router':'VueRouter',
'axios':'axios',
'element-ui':'ELEMENT',
},切記去掉import
使用的時(shí)候可以按需引入
最后當(dāng)然還有服務(wù)器nginx的壓縮
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-cli 構(gòu)建Vue項(xiàng)目遇到的坑
本篇文章主要介紹了詳解vue-cli 構(gòu)建Vue項(xiàng)目遇到的坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性2022-08-08
Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開(kāi)發(fā)工作過(guò)程中，我們會(huì)遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動(dòng)態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯(cuò)。本文為大家介紹了Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下2022-11-11
highCharts提示框中顯示當(dāng)前時(shí)間的方法
今天小編就為大家分享一篇關(guān)于highCharts提示框中顯示當(dāng)前時(shí)間的方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要介紹了vue中echarts視圖不更新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
快速解決electron-builder打包時(shí)下載依賴慢的問(wèn)題
使用 Electron-builder 打包,有時(shí)會(huì)在下載Electron、nsis、winCodeSign的過(guò)程中 Timeout 導(dǎo)致打包失敗,本文給大家分享快速解決electron-builder打包時(shí)下載依賴慢的問(wèn)題,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了Vuejs第八篇之Vuejs組件的定義實(shí)例解析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
vue router+vuex實(shí)現(xiàn)首頁(yè)登錄驗(yàn)證判斷邏輯
這篇文章主要介紹了vue router+vuex實(shí)現(xiàn)首頁(yè)登錄判斷邏輯，用于判斷是否登錄首頁(yè)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了Electron + vue 打包桌面操作流程,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06