首頁 > web前端 > js教程 > 主體

如何使用CDN優化項目載入速度

php中世界最好的语言
發布: 2018-06-12 10:46:58
原創
2364 人瀏覽過

這次帶給大家如何使用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(XXX),如:

// Vue.use(Router)
登入後複製

#測試

重新npm run build,會看到vendor .js體積有所下降了。透過開發者模式的Network工具,可以看到vue.js、vuex.js、vendor.js等檔案會分別由一個執行緒進行載入。而因為使用了CDN,載入速度比自已的伺服器更快。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

react做出頁面程式碼分割、按需載入

Angular2使用Dom有哪些注意事項
#

以上是如何使用CDN優化項目載入速度的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!