vue_router打包(webpack)

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 给 chunk 命名，提供 require.ensure第三个参数作为 chunk 的名称:

  require.ensure语法：

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'home_22')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'itme')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'score')

callback:是用箭头函数来实现
参数=>表达式
其中参数r与后面的r(require('./Foo.vue'))，中的r一致即可
如果是rr那么后面的为rr(require('./Foo.vue')),如果是jj 那么后面也是jj
参数名可以自已来命名。

Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure的依赖（传空数组）

会根据chunk的名字来打包到不同的模块js中，这样就可以在要用的时候加载(路由懒加载);