Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題
前言
作為一個(gè)網(wǎng)站應(yīng)用,加載速度是非常重要的。加載速度,一個(gè)是程序的合理安排,如以組件按需加載,一個(gè)是js、css等資源的異步加載。
在Vue項(xiàng)目中,引入到工程中的所有js、css文件,編譯時(shí)都會(huì)被打包進(jìn)vendor.js,瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫(kù)眾多,那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?,影響首開的體驗(yàn)。
解決方法是,將引用的外部js、css文件剝離開來,不編譯到vendor.js中,而是用資源的形式引用,這樣瀏覽器可以使用多個(gè)線程異步將vendor.js、外部的js等加載下來,達(dá)到加速首開的目的。
外部的庫(kù)文件,可以使用CDN資源,或者別的服務(wù)器資源等。
下面,以引入vue、vuex、vue-router為例,說明處理流程。
一、資源引入
在index.html中,添加CDN資源,例如bootstrap:
<body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>
二、添加配置
在bulid/webpack.base.conf.js文件中,增加externals,將引用的外部模塊導(dǎo)入,如下:
module.exports = { entry: { app: './src/main.js' }, externals:{ 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex' }
注意一點(diǎn):
格式為 'aaa' : 'bbb', 其中,aaa表示要引入的資源的名字,bbb表示該模塊提供給外部引用的名字,由對(duì)應(yīng)的庫(kù)自定。例如,vue為Vue,vue-router為VueRouter.
三、去掉原有的引用
去掉import,如:
// import Vue from 'vue' // import Router from 'vue-router'
去掉Vue.use(XXX),如:
// Vue.use(Router)
測(cè)試
重新npm run build,會(huì)看到 vendor.js體積有所下降了。通過開發(fā)者模式的Network工具,可以看到vue.js、vuex.js、vendor.js等文件會(huì)分別由一個(gè)線程進(jìn)行加載。且因?yàn)槭褂昧薈DN,加載速度比自已的服務(wù)器更快。
總結(jié)
相關(guān)文章
關(guān)于Element UI table 順序拖動(dòng)方式
這篇文章主要介紹了關(guān)于Element UI table 順序拖動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08基于vue開發(fā)微信小程序mpvue-docs跳轉(zhuǎn)頁面功能
這篇文章主要介紹了基于vue寫微信小程序mpvue-docs跳轉(zhuǎn)頁面,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(一)
這篇文章將利用Vue3和Canvas編寫一個(gè)童年經(jīng)典游戲—坦克大戰(zhàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧2022-03-03解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作
這篇文章主要介紹了vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例
這篇文章主要為大家介紹了iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01