vue-router懶載入速度緩慢問題及解決方法

前端攻城小牛發表於2018-11-25

懶載入:也叫延遲載入,即在需要的時候進行載入,隨用隨載。

像vue這種單頁面應用,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,時間過長,會出啊先長時間的白屏,即使做了loading也是不利於使用者體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載入頁面,可以有效的分擔首頁所承擔的載入壓力,減少首頁載入用時。

簡單的說就是:進入首頁不用一次載入過多資源造成用時過長!!!

懶載入的方式:

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. Vue.use(Router)
  4. //採用了懶載入
  5. export default new Router({
  6. routes: [
  7. {
  8. path:'/',
  9. component:resolve => require(['@/components/index'],resolve)
  10. }
  11. ]
  12. })

非懶載入的方式:

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import index from '@/components/index'
  4. Vue.use(Router)
  5. export default new Router({
  6. routes: [
  7. {
  8. path:'/',
  9. component:index
  10. }
  11. ]
  12. })

下面看下vue-router路由懶載入

用vue.js寫單頁面應用時,會出現打包後的JavaScript包非常大,影響頁面載入,我們可以利用路由的懶載入去最佳化這個問題,當我們用到某個路由後,才去載入對應的元件,這樣就會更加高效,實現程式碼如下:

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. Vue.use(Router)
  4. export default new Router({
  5. routes: [
  6. {
  7. path: '/',
  8. component: resolve => require(['components/Hello.vue'], resolve)
  9. },
  10. {
  11. path: '/about',
  12. component: resolve => require(['components/About.vue'], resolve)
  13. }
  14. ]
  15. })

總結

以上所述是小編給大家介紹的vue-router懶載入速度緩慢問題及解決方法,希望對大家有所幫助,

相關文章