vue项目实现路由按需加载（路由懒加载）的三种方式

vue组件异步的原因

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后，一般情况下，会放在一个单独的js文件中。但是，如果很多的页面都放在同一个js文件中，必然会造成这个页面非常大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

路由懒加载有着诸如：“只有第一次会加载页面，以后的每次页面切换，只需要进行组件替换。减少了请求体积，加快页面的响应速度，降低了对服务器的压力”等等优点。

为了解决上面的问题，我们需要对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')