Update lazy-loading.md

Author: yyx990803

docs/en/advanced/lazy-loading.md

@@ -2,24 +2,27 @@
 
 When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited.
 
-Combining Vue's [async component feature](http://vuejs.org/guide/components.html#Async-Components) and webpack's [code splitting feature](https://webpack.js.org/guides/code-splitting-require/), it's trivially easy to
+Combining Vue's [async component feature](http://vuejs.org/guide/components.html#Async-Components) and webpack's [code splitting feature](https://webpack.js.org/guides/code-splitting-async/), it's trivially easy to
 lazy-load route components.
 
-All we need to do is define our route components as async components:
+First, an async component can be defined as a factory function that returns a Promise (which should resolve to the component itself):
 
 ``` js
-const Foo = resolve => {
-  // The `import()` call sets a code-split point.
-  import('./Foo.vue').then(() => {
-    resolve(require('./Foo.vue'))
-  })
-}
+const Foo = () => Promise.resolve({ /* component definition */ })
 ```
 
-There's also an alternative code-split syntax using AMD style require, so this can be simplified to:
+Second, in webpack 2, we can use the [dynamic import](https://github.com/tc39/proposal-dynamic-import) syntax to indicate a code-split point:
 
 ``` js
-const Foo = resolve => require(['./Foo.vue'], resolve)
+import('./Foo.vue') // returns a Promise
+```
+
+> Note: if you are using Babel, you will need to add the [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin so that Babel can properly parse the syntax.
+
+Combining the two, this is how to define an async component that will be automatically code-split by webpack:
+
+``` js
+const Foo = () => import('./Foo.vue')
 ```
 
 Nothing needs to change in the route config, just use `Foo` as usual:
@@ -34,12 +37,12 @@ const router = new VueRouter({
 
 ### Grouping Components in the Same Chunk
 
-Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.js.org/guides/code-splitting-require/#chunkname) by providing a chunk name to `require.ensure` as the 3rd argument:
+Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.js.org/guides/code-splitting-async/#chunk-names) by providing a chunk name using a special comment syntax (requires webpack > 2.4):
 
 ``` js
-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')
+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 will group any async module with the same chunk name into the same async chunk - this also means we don't need to explicitly list dependencies for `require.ensure` anymore (thus passing an empty array).
+webpack will group any async module with the same chunk name into the same async chunk.