版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/duola8789/article/details/83992726
路由的懒加载
当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合Vue的异步组件和Webpack的代码分割功能，轻松实现路由组件的懒加载。
如下的方法可以定义一个能够被 Webpack 自动代码分割的异步组件
const Foo = () => import('./Foo.vue')
如果您使用的是 Babel，你将需要添加syntax-dynamic-import插件，才能使 Babel 可以正确地解析语法。
在路由配置中什么都不需要改变，只需要像往常一样使用Foo：
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
或者省略定义Foo的过程：
const router = new VueRouter({
routes: [
{ path: '/foo', component: () => import('./Foo.vue') }
]
})
优化
当路由增多时，routes中每个cmponent都需要按照如上的样式实现懒加载，并且在开发环境中使用懒加载，会导致代码更改的热跟新速度变慢，所以需要区分环境来使用路由的懒加载功能
在路由文件夹下新建两个文件：
_import_production.js：
module.exports = file => () => import('@/views/' + file + '.vue')
_import_development.js (这种写法vue-loader版本至少v13.0.0以上)：
module.exports = file => require('@/views/' + file + '.vue').default
在设置路由的router/index.js文件中：
扫描二维码关注公众号，回复：
4344349 查看本文章
const _import = require('./_import_' + process.env.NODE_ENV)
export default new Router({
routes: [{ path: '/login', name: '登陆', component: _import('login/index') }]
})