问题：vue-router实现动态加载路由组件（ 懒加载 ）

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

第一步：定义一个能够被 Webpack 自动代码分割的异步组件。

// 在src/router/index.js里面引入异步引入组件
const index = () => import('../page/list/index.vue');

第二步：在路由配置中什么都不需要改变，只需要像往常一样使用 index。

const router = new VueRouter({
 routes: [
 { path: '/index', component: index,name:"index" }
 ]
})

第三步：在build/webpack.base.conf.js下的output属性，新增chunkFilename。

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 //新增chunFilename属性
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
 ? config.build.assetsPublicPath
 : config.dev.assetsPublicPath
 },

编辑器：