CDN優化首屏載入速度
這次帶給大家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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
深度解讀：為何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
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 pm 01:30 PM
Laravel效能瓶頸揭秘：優化方案大揭秘！隨著網路技術的發展，網站和應用程式的效能優化變得愈發重要。作為一款流行的PHP框架，Laravel在開發過程中可能會面臨效能瓶頸。本文將探討Laravel應用程式可能遇到的效能問題，並提供一些最佳化方案和具體的程式碼範例，讓開發者能夠更好地解決這些問題。一、資料庫查詢最佳化資料庫查詢是Web應用中常見的效能瓶頸之一。在
麒麟9000s性能究竟如何？
Mar 22, 2024 pm 03:21 PM
作為一款備受關注的旗艦手機，麒麟9000s一推出便引起了廣泛的討論和關注。它搭載了麒麟9000系列最新的旗艦晶片，性能堪稱強勁。那麼，麒麟9000s的性能究竟如何？讓我們一起來探討。首先，麒麟9000s採用了全新的5nm製程製造，大幅提升了晶片的效能和功耗控制。與之前的麒麟處理器相比，麒麟9000s在效能上有著明顯的提升。無論是運行大型遊戲、多工或
優化WIN7系統開機啟動項目的操作方法
Mar 26, 2024 pm 06:20 PM
1.在桌面上按組合鍵(win鍵+R)開啟運行窗口，接著輸入【regedit】，回車確認。 2.開啟登錄編輯程式後，我們依序點選展開【HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer】，然後看目錄裡有沒有Serialize項，如果沒有我們可以點選右鍵Explorer，新建項，並將其命名為Serialize。 3.接著點選Serialize，然後在右邊窗格空白處點選滑鼠右鍵，新建一個DWORD(32)位元值，並將其命名為Star
Vivox100s參數配置大揭密：處理器效能如何最佳化？
Mar 24, 2024 am 10:27 AM
Vivox100s參數配置大揭密：處理器效能如何最佳化？在當今科技快速發展的時代，智慧型手機已經成為我們日常生活不可或缺的一部分。作為智慧型手機的重要組成部分，處理器的效能優化直接關係到手機的使用體驗。 Vivox100s作為一款備受矚目的智慧型手機，其參數配置備受關注，尤其是處理器效能的最佳化議題更是備受用戶關注。處理器作為手機的“大腦”，直接影響手機的運行速度
