詳解vue項(xiàng)目首頁加載速度優(yōu)化
凡是做SPA的項(xiàng)目，特別是移動(dòng)端的SAP項(xiàng)目，首屏加載速度必定是一個(gè)繞不過去的話題。接下來我就我們項(xiàng)目里的一些實(shí)踐來做一下總結(jié)。希望拋磚引玉，如果各位有更好的方案，不吝賜教。
1: 針對第三方j(luò)s庫的優(yōu)化
我們項(xiàng)目里用到的第三方j(luò)s庫主要有：vue, vue-router, vuex, axio, 我們還用到了qiniu。大家知道這些依賴庫的js文件都會被一起打包到vender那個(gè)js文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導(dǎo)致vender這個(gè)文件很大，那首屏加載的速度肯定會被拖慢。
針對這個(gè)問題我們的解決方案是，用文檔的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,因?yàn)樵诘谝徊揭呀?jīng)通過script標(biāo)簽引用進(jìn)來了。
3: 把第三方庫的js文件從打包文件里去掉
這一步的做法就是利用webpack的externals。具體做法就是在 build/webpack.base.conf.js文件的module里面與rules同層加入externals：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue開發(fā)實(shí)現(xiàn)吸頂效果的示例代碼
這篇文章主要介紹了Vue開發(fā)實(shí)現(xiàn)吸頂效果的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實(shí)現(xiàn),需要的朋友可以參考下2024-01-01
今天小編就為大家分享一篇淺談vue中組件綁定事件時(shí)是否加.native，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vite打包優(yōu)化CDN壓縮的分析實(shí)現(xiàn)
我們在日常的工作中肯定會遇到項(xiàng)目打包優(yōu)化等問題,本文主要介紹了vite打包優(yōu)化CDN壓縮的分析實(shí)現(xiàn),具有一定的參加價(jià)值,感興趣的可以了解一下2024-07-07
Vant?Weapp組件picker選擇器初始默認(rèn)選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue單個(gè)組件實(shí)現(xiàn)無限層級多選菜單功能
這篇文章主要介紹了vue單個(gè)組件實(shí)現(xiàn)無限層級多選菜單的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
新手vue構(gòu)建單頁面應(yīng)用實(shí)例代碼
本篇文章主要介紹了新手vue構(gòu)建單頁面應(yīng)用實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)
這篇文章主要介紹了vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下2023-08-08
vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
這篇文章主要介紹了vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06