@@ -17,19 +17,25 @@ const Home = { template: '<div>home</div>' }
17
17
// or
18
18
// - () => Promise<Component>
19
19
20
- // For single component, we can use the AMD shorthand
21
- // require(['dep'], dep => { ... })
22
- const Foo = resolve => require ( [ './Foo.vue' ] , resolve )
20
+ // For single component, we can simply use dynamic import which returns
21
+ // a Promise.
22
+ const Foo = ( ) => import ( './Foo.vue' )
23
23
24
- // If using Webpack 2, you can also do:
25
- // const Foo = () => System.import('./Foo.vue')
24
+ // The import() syntax is a replacement for the deprecated System.import() and
25
+ // is specified at https://github.com/tc39/proposal-dynamic-import. Webpack 2
26
+ // supports using it to indicate a code-splitting point.
27
+ // Note: if using Babel you will need `babel-plugin-syntax-dynamic-import`.
28
+
29
+ // If using Webpack 1, you will have to use AMD syntax or require.ensure:
30
+ // const Foo = resolve => require(['./Foo.vue'], resolve)
26
31
27
32
// If you want to group a number of components that belong to the same
28
33
// nested route in the same async chunk, you will need to use
29
34
// require.ensure. The 3rd argument is the chunk name they belong to -
30
35
// modules that belong to the same chunk should use the same chunk name.
31
- const Bar = r => require . ensure ( [ ] , ( ) => r ( require ( './Bar.vue' ) ) , '/bar' )
32
- const Baz = r => require . ensure ( [ ] , ( ) => r ( require ( './Baz.vue' ) ) , '/bar' )
36
+ // For more details see https://webpack.js.org/guides/code-splitting-require/
37
+ const Bar = resolve => require . ensure ( [ ] , ( ) => resolve ( require ( './Bar.vue' ) ) , '/bar' )
38
+ const Baz = resolve => require . ensure ( [ ] , ( ) => resolve ( require ( './Baz.vue' ) ) , '/bar' )
33
39
34
40
const router = new VueRouter ( {
35
41
mode : 'history' ,
0 commit comments