vue-routerルート怠惰ロード(記録)

3510 ワード

javascript

パッケージ構築アプリケーションの場合、JavaScriptパッケージは非常に大きくなり、ページローディングに影響を与えます.異なるルーティングに対応するコンポーネントを異なるコードブロックに分割し、ルーティングがアクセスされるときに対応するコンポーネントをロードすることができれば、より効率的になる.
プロジェクトコード

今回も勉強したばかりのコードです.プロジェクトの管理が便利です.
ディレクトリ構造:

 - router
   - index.js
   - router.js

router.js:ルーティング情報ファイル

export default {
  '/': {
    path: 'components/aaa',
    name: 'aaa'
  },
  '/bbb': {
    path: 'components/bbb',
    name: 'bbb'
  },
  '/ccc': {
    path: 'components/ccc',
    name: 'ccc'
  },
  '/ddd': {
    path: 'components/ddd',
    name: 'ddd'
  },
  '/eee': {
    path: 'components/common/eee',
    name: 'eee'
  }
}

index.js:ルーティングプロファイル

import Vue from 'vue'
import Router from 'vue-router'
import router from './router'

Vue.use(Router)

function lazyLoad (path) {
  return resolve => require(['@/' + path + '.vue'], resolve)
}

let routers = []
for (let key in router) {
  if ({}.hasOwnProperty.call(router, key)) {
    let item = {}
    item.name = router[key].name
    item.path = key
    item.component = lazyLoad(router[key].path)
    routers.push(item)
  }
}
/**
 *       
 */
export default new Router({
  mode: 'history',
  routes: routers
})

転載先:https://juejin.im/post/5ce7b5a1f265da1b904bbc55

javascriptに深く入り込んで対象に向かって、jsの原型チェーン、継承