Vue组件懒加载

  • 默认情况下,组件是在router/index.js头部这样加载的:
    import index from '@/components/index'
    @代表"src",在配置文件中默认配置了别名:
resolve: {
   .......
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

这种写法会在加载首页时,加载所有组件,导致首页加载过慢,出现白屏

  • 组件懒加载是在组件需要使用的时候才加载,不是在router/index.js头部就import,而是在路由表中import
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})
posted @ 2019-09-10 14:30  手指乐  阅读(1419)  评论(0编辑  收藏  举报