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