为什么必须路由懒惰的加载：打包构建APP应用程序会导致JavaScript软件包非常大，从而影响页面加载。 如果可以将对应于不同路由的组件划分为不同的代码块，并在路由被访问时加载对应的组件，则会更有效率。
未使用懒惰加载： importvuefrom ' vue ' importrouterfrom ' vue-router ' importhomefrom ' ./pages/home.vue ' importaboutaboutffrom exportdefaultnewrouter ((routes : (path : (/)，name: ) home )，component: Home，)， 在path 3360 (/aboo me component : about } } import中，项目打包时根中的所有component打包为一个js，在访问首页时为行
当以require的方式引入漂亮的苗条时，你的每个component都打包在单独的js中，在加载时也会按需加载，并且只有在访问此根站点时才会加载此js。
一.加载vue异步组件： importvuefrom ' vue ' importrouterfrom ' vue-router ' vue.use (router ) exportdefaultnewrouter ({ name: 'Home '，component : resolve=require ([ ' ./pages/home.vue ' ]，resolve { path: '/about '，NAT ) 组件： resolve=require ([ ' ./pages/about.vue '，resolve ) exportdefaultnewrouter ((routes : ) path 3360 component3360helloworld}}/*或*/exportdefaultnewrouter ({ routes : ({ path : '/'， name: 'HelloWorld ) } component 3360 (=import (' @/components/hello world ' ) )根下的所有组件都是同一个异步块(ccomponent ) 要提供chunk name，必须使用命名chunk和特殊的注释语法(需要Webpack 2.4 )。
Webpack将与任何异步模块相同的块名称分组到同一异步块中。 以下代码指定相同的webpackChunkName，并将其打包在一个js文件中。 将单元按块划分
const Foo=() ) import (/* webpackchunkname : ' group-foo ' */'./foo.vue ' ) const Bar=) )/import *。 webpackchunkname : ' group-foo ' */(./baz.vue ' )以下代码没有指定WebPackChunknknname
const Home=() )=import ) ) @/components/home ) )=import ) ) @/components/index ) ) const About=) ) 在这种情况下，如果为多个根指定相同的chunkName，则会将其打包在一个js文件中。 例如，如果chunkName为demo1，则打包为js文件；如果chunkName为demo2，则打包为js文件。
//r为resolve{ path: '/home '，name: 'home '，component 3360 r=require.ensure ([ ]，) )=r ) @@ ) reque component : r=require.ensure ([，] )=r ) require ) @/componentttttre { path : '/about '，name: 'about )=r ) require ) @/componenttttre ' demo2' } web pack路由可以选择使用： require.ensure (dependencies : string [ ] )
这是一个字符串数组，可以在执行所有回调函数的代码之前声明所有必需的模块。
2、回叫
加载所有依赖关系后，webpack将执行此回调函数。 require对象的实现作为参数传递给回调函数。 因此，require () )依存关系和其他模块可以提供下一步的执行。
3、chunkName
chunkName是为此特定require.ensure () )提供的chunk的名称。 通过为require.ensure ()中的不同执行点指定相同的名称，可以确保所有依存关系都集中在同一个文件包(bundle )中。
注意： requi.ensure会在需要时下载相关的模块。 只有在参数指定的所有模块都已下载(下载的模块尚未运行)且回调函数使用require (模块名称)时，才会运行此模块。