Vue怎麼能使用CDN優化首屏載入的速度-js教程-PHP中文網

首頁

web前端

js教程

Vue怎麼能使用CDN優化首屏載入的速度

php中世界最好的语言

Apr 08, 2018 pm 03:57 PM

最佳化載入速度

這次帶給大家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：

<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)

登入後複製

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

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

C++ 程式最佳化：時間複雜度降低技巧 Jun 01, 2024 am 11:19 AM

時間複雜度衡量演算法執行時間與輸入規模的關係。降低C++程式時間複雜度的技巧包括：選擇合適的容器（如vector、list）以最佳化資料儲存和管理。利用高效演算法（如快速排序）以減少計算時間。消除多重運算以減少重複計算。利用條件分支以避免不必要的計算。透過使用更快的演算法（如二分搜尋）來優化線性搜尋。

解碼Laravel效能瓶頸：優化技巧全面揭秘！ Mar 06, 2024 pm 02:33 PM

解碼Laravel效能瓶頸：優化技巧全面揭秘！ Laravel作為一個受歡迎的PHP框架，為開發者提供了豐富的功能和便利的開發體驗。然而，隨著專案規模增加和訪問量增加，我們可能會面臨效能瓶頸的挑戰。本文將深入探討Laravel效能最佳化的技巧，幫助開發者發現並解決潛在的效能問題。一、資料庫查詢優化使用Eloquent延遲載入在使用Eloquent查詢資料庫時，避免

深度解讀：為何Laravel速度慢如蝸牛？ Mar 07, 2024 am 09:54 AM

Laravel是一款廣受歡迎的PHP開發框架，但有時候被人詬病的就是其速度慢如蝸牛。究竟是什麼原因導致了Laravel的速度不盡人意呢？本文將從多個面向深入解讀Laravel速度慢如蝸牛的原因，並結合具體的程式碼範例，幫助讀者更深入地了解此問題。 1.ORM查詢效能問題在Laravel中，ORM（物件關係映射）是一個非常強大的功能，可以讓

Golang的gc優化策略探討 Mar 06, 2024 pm 02:39 PM

Golang的垃圾回收（GC）一直是開發者關注的熱門話題。 Golang作為一門快速的程式語言，其自帶的垃圾回收器能夠很好地管理內存，但隨著程式規模的增大，有時會出現一些效能問題。本文將探討Golang的GC最佳化策略，並提供一些具體的程式碼範例。 Golang中的垃圾回收Golang的垃圾回收器採用的是基於並發標記-清除（concurrentmark-s

Laravel效能瓶頸揭秘：優化方案大揭秘！ Mar 07, 2024 pm 01:30 PM

Laravel效能瓶頸揭秘：優化方案大揭秘！隨著網路技術的發展，網站和應用程式的效能優化變得愈發重要。作為一款流行的PHP框架，Laravel在開發過程中可能會面臨效能瓶頸。本文將探討Laravel應用程式可能遇到的效能問題，並提供一些最佳化方案和具體的程式碼範例，讓開發者能夠更好地解決這些問題。一、資料庫查詢最佳化資料庫查詢是Web應用中常見的效能瓶頸之一。在

LG 量產 27 吋 480Hz QHD 遊戲 OLED 面板清晰度響應速度創新高 Sep 01, 2024 pm 03:37 PM

近日，LGDisplay宣布，其27吋480HzQHD遊戲OLED面板正式投入量產。該面板在OLED產品中創造了刷新率和響應速度的新高，480Hz的刷新率搭配0.02ms的GtG灰階響應時間，較之前0.03ms的記錄更進一步，為FPS、賽車等遊戲類型帶來極致體驗。新面板優化LGDisplay的METATechnology技術提升了OLED材質發光效率。畫質增強，鏡面反射大幅減少。四面無邊框設計擴大了視野範圍，帶來沉浸感體驗。像素結構優化WRGB像素結構針對遊戲和文件編輯需求最佳化。文字顯示更加清

優化WIN7系統開機啟動項目的操作方法 Mar 26, 2024 pm 06:20 PM

1.在桌面上按組合鍵(win鍵+R)開啟運行窗口，接著輸入【regedit】，回車確認。 2.開啟登錄編輯程式後，我們依序點選展開【HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer】，然後看目錄裡有沒有Serialize項，如果沒有我們可以點選右鍵Explorer，新建項，並將其命名為Serialize。 3.接著點選Serialize，然後在右邊窗格空白處點選滑鼠右鍵，新建一個DWORD(32)位元值，並將其命名為Star