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