react.lazy 路由懒加载_7.8 vue-router实现路由懒加载(动态加载路由),新增chunkFilename...

问题：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 },

编辑器：