如何深刻的理解vue组件懒加载， vue-router里的把组件按组分块打包？？？

Question

vue组件懒加载常用的两种方式（import()方式需要引入插件以便Bable编译暂且不谈）：

第一种：
const Foo = resolve => require(['./Foo.vue'], resolve)

第二种：
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

问题1：第一种是每个路由打包对应一个js文件对吧？第二种是同名的chunk被打包成一个js文件，也就是说上面的的三个路由打包成了一个js。请求任意一个路由，都会加载整个js文件。这样不是还没第一种方法好了？该怎么理解呢？

问题2:第二种方法跟vue-router官网所说的把组件按组分块又是什么意思呢？resolve => require(['./Foo.vue'], resolve)这种方法不是已经把一个路由的所有组件打包在一个js文件里了么？

贴上vue-router官方的一段原话：

*把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
const Foo = () => import(/ webpackChunkName: "group-foo" / './Foo.vue')
const Bar = () => import(/ webpackChunkName: "group-foo" / './Bar.vue')
const Baz = () => import(/ webpackChunkName: "group-foo" / './Baz.vue')
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。*

Answer 1

好不好是相对的。要结合结合业务情况而定。
现在webpack不推荐用require.ensure写法，推荐import(/ webpackChunkName: "group-foo" / './Baz.vue')
vue组件懒加载是依赖webpack提供的能力。建议照着文档多做练习 https://doc.webpack-china.org...