詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化
凡是做SPA的項(xiàng)目，特別是移動(dòng)端的SAP項(xiàng)目，首屏加載速度必定是一個(gè)繞不過(guò)去的話題。接下來(lái)我就我們項(xiàng)目里的一些實(shí)踐來(lái)做一下總結(jié)。希望拋磚引玉，如果各位有更好的方案，不吝賜教。
1: 針對(duì)第三方j(luò)s庫(kù)的優(yōu)化
我們項(xiàng)目里用到的第三方j(luò)s庫(kù)主要有：vue, vue-router, vuex, axio, 我們還用到了qiniu。大家知道這些依賴庫(kù)的js文件都會(huì)被一起打包到vender那個(gè)js文件里面，如果這些你的第三方依賴庫(kù)很多，很大的話，那就會(huì)導(dǎo)致vender這個(gè)文件很大，那首屏加載的速度肯定會(huì)被拖慢。
針對(duì)這個(gè)問題我們的解決方案是，用文檔的cdn文件代替，而不用打包到vender里面去。具體的做法是：
1: 在index.html里面引入依賴庫(kù)js文件
// index.html <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
2: 去掉第三方j(luò)s的import,因?yàn)樵诘谝徊揭呀?jīng)通過(guò)script標(biāo)簽引用進(jìn)來(lái)了。
3: 把第三方庫(kù)的js文件從打包文件里去掉
這一步的做法就是利用webpack的externals。具體做法就是在 build/webpack.base.conf.js文件的module里面與rules同層加入externals：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue對(duì)Element中的el-tag添加@click事件無(wú)效的解決
本文主要介紹了Vue對(duì)Element中的el-tag添加@click事件無(wú)效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法
今天小編就為大家分享一篇在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
解析使用useDark(),發(fā)現(xiàn)transition?動(dòng)畫失效
這篇文章主要為大家介紹了使用useDark(),發(fā)現(xiàn)transition動(dòng)畫失效的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue驗(yàn)證用戶名是否可用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue使用json最簡(jiǎn)單的兩種方式分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue的核心原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要介紹了vue中template模板編譯的過(guò)程全面剖析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法
最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來(lái)越快。接下來(lái)通過(guò)本文給大家分享Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法，感興趣的朋友一起看看吧2019-08-08
vue-next-admin項(xiàng)目使用cdn加速詳細(xì)配置
這篇文章主要為大家介紹了vue-next-admin項(xiàng)目使用cdn加速的詳細(xì)配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
詳解vue如何獲取當(dāng)前系統(tǒng)時(shí)間
這篇文章主要詳細(xì)介紹了vue如何獲取當(dāng)前系統(tǒng)時(shí)間,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01