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