Vue实现路由懒加载的三种方式结合vue的异步组件和Webpack的代码分割功能可以实现路由组件的懒加载。打包后，每一个

1.Vue异步组件技术

结合vue的异步组件和Webpack的代码分割功能可以实现路由组件的懒加载。打包后，每一个组件生成一个js文件。举例如下:

{
  path: '/Demo',
  name: 'Demo',
  //打包后，每个组件单独生成一个chunk文件
  component: reslove => require(['../views/Demo'], resolve)
}

2.动态import语法

在Webpack2中，我们可以使用动态import语法来定义代码分快点(split point)推荐使用这种方法

如果使用的是Bable，你将需要添加syntax-dynamic-import插件，才能使Babel可以正确的解析语法。
vue官方文档路由懒加载配置

举例如下:

//默认将每个组件，单独打包成一个js文件
const Demo = () => import('../views/Demo')
const Demo1 = () => import('../views/Demo1')

默认打包后结果：

把组件按组分块

有时我们想把某个路由下的所有组件都打包在同一个异步块(chunk)中。需要使用命名chunk一个特殊的注释语法来提供chunk name(需要webpack > 2.4)。

//指定了相同的webpackChunkName,会合并打包成一个文件。
const Demo = () => import(/*webpackChunkName:'Home'*/ '../views/Demo')
const Demo1 = () => import(/*webpackChunkName:'Home'*/ '../views/Demo1')

加注释合并打包后结果：

3.require.ensure()

使用webpacke的require.ensure也可以实现按需加载。

require.ensure()是webpack特有的，现在已经被import()取代。
这个特性依赖于内置的promise，低版本浏览器使用require.ensure需要考虑是否支持es6

//这种情况下，多个路由指定相同的chunkName，会打包成一个文件
const Demo = r => require.ensure([], () => r(require('../views/Demo')), 'Demo')
const Demo1 = r => require.ensure([], () => r(require('../views/Demo1')), 'Demo')

第一次发文，写的可能也不是什么新奇的东西，也不知道说啥好
祝各位冬至快乐吧
(:△」∠)