Vue提高15 路由根据开发状态懒加载

路由的懒加载

当打包构建应用时，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文件中：

const _import = require('./_import_' + process.env.NODE_ENV)
 
export default new Router({
  routes: [{ path: '/login', name: '登陆', component: _import('login/index') }]
})

参考

• Vue Router - 路由懒加载
• 伯乐在线 - Vue使用中的小技巧