這次帶給大家如何使用CDN優化專案載入速度,使用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:
<body> <p id="app"></p> <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(Router)
#測試
重新npm run build,會看到vendor .js體積有所下降了。透過開發者模式的Network工具,可以看到vue.js、vuex.js、vendor.js等檔案會分別由一個執行緒進行載入。而因為使用了CDN,載入速度比自已的伺服器更快。 相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:以上是如何使用CDN優化項目載入速度的詳細內容。更多資訊請關注PHP中文網其他相關文章!