這次帶給大家Vue怎麼使用CDN優化首屏載入的速度,Vue使用CDN優化首屏載入速度的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
作為網站應用,載入速度是非常重要的。載入速度,一個是程式的合理安排,如以元件按需加載,一個是js、css等資源的非同步載入。
在Vue專案中,引入到工程中的所有js、css文件,編譯時都會被打包進vendor.js,瀏覽器在載入該文件之後才能開始顯示首屏。若是引進的函式庫眾多,那麼vendor.js檔案體積將會相當的大,影響首開的體驗。
解決方法是,將引用的外部js、css檔案剝離開來,不編譯到vendor.js中,而是用資源的形式引用,這樣瀏覽器可以使用多個執行緒異步將vendor.js、外部的js等載入下來,達到加速首開的目的。
外部的庫文件,可以使用CDN資源,或是別的伺服器資源等。
下面,以引入vue、vuex、vue-router為例,說明處理流程。
一、資源導入
在index.html中,加入CDN資源,例如bootstrap:
1 2 3 4 5 6 |
|
二、新增設定
在bulid/webpack.base.conf.js檔案中,增加externals,將引用的外部模組導入,如下:
1 2 3 4 5 6 7 8 9 |
|
注意一點:
#格式為'aaa' : 'bbb', 其中,aaa表示要引入的資源的名字, bbb表示該模組提供給外部引用的名字,由對應的庫自定。例如,vue為Vue,vue-router為VueRouter.
#三、去掉原有的引用
##去掉import,如:1 2 |
|
1 |
|
#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:
以上是Vue怎麼能使用CDN優化首屏載入的速度的詳細內容。更多資訊請關注PHP中文網其他相關文章!