Vue單頁面應用效能優化實踐
Vue單頁面應用效能優化實踐
最近業餘時間一直在做一個個人專案，使用的是vue+vue-router實現的單頁面應用。相對於多頁面應用來說，其實單頁面應用對效能優化的要求要更高，因為首屏載入的檔案要更大，只要過了首屏載入問題，使用過程中單頁面應用是會比多頁面應用流暢的多的。閒話不多說，接下來講下我優化過程中兩個很實用的方法：
（1）對路由元件進行懶載入
這裡的懶載入是指在訪問到對應的元件時才載入它，首屏的時候不載入。這裡實現的方法很簡單，只要將以前直接import元件的方式改為：const Login = () => import('@/pages/Login’);即可。
我的專案最大檔案（vendor.js
（2）針對第三方庫檔案使用cdn方式
之前我是使用npm安裝之後import方式，這樣就相當於一起打包到了vendor檔案裡了。
按照bootstrap官網引入相應的cdn檔案後（包括jquery和bootstrap），我的專案最大檔案大小變成了680kb，載入速度從8.5s變成了5.8s。
然後試圖引入element-ui theme-chalk之後，最大檔案大小沒多大變化，但是載入速度從5.8s變成了4.2s。
接著又引入了vue和element-ui cdn檔案，這下網站有了巨大突破，最大檔案竟然降到了37kb，自己都被驚訝到了，載入速度也從4.2s變成了80ms，整個網站載入完成只花了1.5s，終於達到了秒開的效果，美滋滋...哈哈哈
以上兩點就是我最近實踐過程的總結，以後有新的收穫我也會進一步更新的。
附：我的個人專案可以在http://47.100.177.183體驗，之所以沒有域名，就是備案的鍋，想備案上海的又要求上海居住證，想備案湖南老家的，又沒有湖南歸屬地的手機號（個人覺得這是一個奇葩要求）…
相關推薦
Vue單頁面應用效能優化實踐
Vue單頁面應用效能優化實踐最近業餘時間一直在做一個個人專案，使用的是vue+vue-router實現的單頁面應用。相對於多頁面應用來說，其實單頁面應用對效能優化的要求要更高，因為首屏載入的檔案要更大，
教你怎樣快速建立Vue單頁面應用
教你怎樣快速建立Vue單頁面應用 Vue.js是一套目前比較流行的構建使用者介面的漸進式框架，Vue 能夠為複雜的單頁應用程式提供驅動。廢話不多說，進入正題。 1.安裝： 首先您需要安裝npm，如何安裝npm，請參考node.js相關內容。 安裝vue $ npm install
vue單頁面應用開啟新視窗顯示跳轉頁面的方法
一般單頁面應用，例如vue都是通過vue-router來做跳轉，不會像多頁應用一樣另起新頁面顯示，但是也不排除一些業務上的需要。一般情況下單頁面應用的路由跳轉我們都是通過簡單的一句話搞定：this.$router.push({name: 'abc'})以上是常規的通過路由的頁
如何在基於 vue 單頁面應用全域性使用 websocket ，以及如何定義全域性變數並在其他頁面改變其值
1）首先建立一個全域性 js 檔案，如 global.js ，用於定義全域性變數 ws 和方法 setWs() // global.js export default { ws: {}, setWs: function(newWs) {
Vue 單頁面應用 另闢蹊徑監聽物理返回事件
最近公司有新的需求要使用單頁面 進行開發，選來選去選擇了VUE 因為路由管理起來比較的方便。於是乎開始邊學邊寫。很多坑， 最近又有了新的需求 在android環境下 監聽到使用者點選物理返回事件， 網頁應用就是有些麻煩 百度了很久。網上給的方法基本都是使用Xback.
vue單頁應用實現優化seo區分tdk
由於做的活動有tdk的需求，而且並不只有一個頁面，所以就需要區分不同路由的tdk檢索了很多方式開始嘗試了一種智慧實現title的替換，外掛名字我忘記了，最後沒有用他我現在使用的是 vue-meta-info但是查閱了資料以後好像更優的話還需要其他設定，但是現在基本滿足需求了~
VUE單頁面應用，如何判斷元件內塊級元素中內容滾動到底
第一次寫自己的原創技術部落格，歡迎大家批評指正。最近在用VUE框架做一個移動端的單頁面應用，專案中碰到了一個關於滾動載入的問題，由於某些原因，用已有的滾動載入的框架實現不了UI小GG設計出來的效果，無奈之下只能自己去摸索。在網上面看了很久，發現滾動載入的關鍵就是如何去判斷使用
QQ音樂Android客戶端Web頁面通用效能優化實踐
QQ音樂 Android 客戶端的 Web 頁面日均 PV 達到千萬量級，然而頁面的開啟耗時與 Native 頁面相距甚遠，需要系統性優化。本文將介紹 QQ 音樂 Android 客戶端在進行 Web 頁面通用效能優化過程中的問題、思路、方案和效果，並嘗試對跨端場景的常見瓶頸和對策進行歸納。文章作者：關岳，
Vue單頁面應用中的Markdown渲染
之前渲染 Markdown 的時候, 筆者使用的是 [mavonEditor](https://github.com/hinesboy/mavonEditor) 的預覽模式, 使用起來比較爽, 只需要引入元件即可, 但是在最近的開發中, 遇到了困難. 主要問題在於作為單頁面應用, 站內連結必須是使用 `ro
VUE專案效能優化實踐——通過懶載入提升頁面響應速度
本文由葡萄城技術團隊原創並首發 轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 最近我司因業務需求，需要在一個內部資料分析平臺整合線上Excel功能，既然我們自己就是做開發工具的，所以目光自然就落在了我司自研的前端表格產品上。 專案的目的是要通過資
輕量級MVVM框架Vue.js快速上手（MVVM、SEO單頁面應用）
靈活 vue.js 課程 基礎 har rip 完成 crud 通過 輕量級MVVM框架Vue.js快速上手（MVVM、SEO單頁面應用、×××服務器端渲染、Nuxt.js） 網盤地址：https://pan.baidu.com/s/1LkhepNpGAtRjrxp_CVJ
Vue系列（1）：單頁面應用程序
str from logs 引擎 每次 應用 跳轉方式 新手上路 為什麽 前言：關於頁面上的知識點，如有侵權，請看 這裏 。 關鍵詞：SPA、單個 HTML 文件、全靠 JS 操作、Virtual DOM、hash/history api 路由跳轉、ajax 響應、按需
vue 單頁應用點擊某個鏈接，跳轉到新頁面的方式
subst ams out 詳情 targe god str blank attribute <router-link class="goDetail" :to="{name: ‘detail‘,params: {id:item.id}}" target = _bl
Vue 應用效能優化指南
得益於 Vue 的 響應式系統 和 虛擬 DOM 系統 ，Vue 在渲染元件的過程中能自動追蹤資料的依賴，並精確知曉資料更新的時候哪個元件需要重新渲染，渲染之後也會經過虛擬 DOM diff 之後才會真正更新到 DOM 上，Vue 應用的開發者一般不需要做額外的優化工作。
Vue系列（1）：單頁面應用程式
前言：關於頁面上的知識點，如有侵權，請看 這裡 。 關鍵詞：SPA、單個 HTML 檔案、全靠 JS 操作、Virtual DOM、hash/history api 路由跳轉、ajax 響應、按需載入、MVVM SPA 我們先來看一下在百科上面的解釋吧，emmmm，一般呢，我每次搜尋一些不懂的詞，都會
[譯] 用 Flask 和 Vue.js 開發一個單頁面應用
原文地址：Developing a Single Page App with Flask and Vue.js 原文作者：Michael Herman 譯文出自：掘金翻譯計劃 本文永久連結：github.com/xitu/gold-m… 譯者：Mcskiller
vue製作微信分享的單頁面應用
前端 - vue框架後端 - node框架node負責呼叫微信的介面獲取accesstoken 然後換取ticket去儲存 request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_cr
【前端框架】Backbone.js在大型單頁面應用中的應用實踐
Backbone.js是什麼？ Backbone.js是一個JavaScript MVC框架，提供了良好的程式碼組織能力，可以方便地將應用程式解耦成可以複用的部分，為建立大型的單頁面應用提供框架支援，目前的版本是0.9.10（注：現在已到1.2.1版本）。通過將應用程式分解成MVC模式中不同職責的模組，
vue單頁面程式對谷歌GA事件的應用
公司運營最近在對網頁做使用者轉化率調查這塊，找到了谷歌GA事件。按照之前GA官網給出的文件，把程式碼加入到了index.html裡面，一週後發現統計出來的資料跟後臺資料庫對比對不上。 經過一番研究後，發現谷歌GA事件的網頁追蹤原理是每一次網頁跳轉都會呼叫那個gt
一個例子入門Vue2.X+vue-router+Vuex+Webpack單頁面應用程式
本篇博文講解如何使用Vue2.X+vue-router+VueX+Webpack實現一個模組化的單頁面應用程式，新手向。 1.功能實現 使用Vue2.X的理由是它屬於輕量級的JS庫，對於流量敏感的移動端來說更友好；容易上手，具有完備的中文文件，學習曲線較