如何深刻的理解vue組件懶加載， vue-router里的把組件按組分塊打包？？？

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：第一種是每個路由打包對應(yīng)一個js文件對吧？第二種是同名的chunk被打包成一個js文件，也就是說上面的的三個路由打包成了一個js。請求任意一個路由，都會加載整個js文件。這樣不是還沒第一種方法好了？該怎么理解呢？

問題2:第二種方法跟vue-router官網(wǎng)所說的把組件按組分塊又是什么意思呢？resolve => require(['./Foo.vue'], resolve)這種方法不是已經(jīng)把一個路由的所有組件打包在一個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 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。*