vue组件异步的原因

前端开发使用Vue框架 路由这一块默认是这样的这样的

 import HelloWord from '@/components/HelloWord'
 import Login from '@/components/Login'
 import Index from '@/components/Index'

     这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载，方法有三种：

1. vue异步组件

vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。
但是，这种情况下一个组件生成一个js文件。 举例如下：

   {
       path:'/login',
       name:'Login',
       component:resolve => reauire(['../component/login/login'],resolve)
   }

2. es6提案的import()

推荐使用这种方式(需要webpack > 2.4)
     webpack官方文档：webpack中使用import()
     vue官方文档：路由懒加载(使用import())

  const Login=()=>import('../component/login/login')
  {
      path:'/login',
      name:'Login',
      component:Login
  }

3. webpack的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。 这种情况下，多个路由指定相同的name，会合并打包成一个js文件。 举例如下：

 {
     path: '/login',
     name: 'Login',
     component: resolve => require.ensure([], () => resolve(require('../components/Login')), 'demo')
 },
 {
     path: '/hello',
     name: 'Hello',
     // component: Hello
     component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
 }