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
    }
  ]
})