vue-router根据环境改变动态加载组件

背景

在webpack的新特性中支持组件的懒加载，也就是说我们可以在加载到该路由的时候再把这部分脚本进行加载，同时这个在项目进行打包的时候，对应的文件也会被单独打包，对于首屏优化以及其他页面的资源加载优化都是非常好的。这也要求我们在每个页面组件使用组件的时候尽量按需引入，提升体验。

问题场景&&需求

那么我们需要解决的问题是： 0 webpack是静态解析路径的，直接传入变量并不可行 1 每次都写一串加载组件的代码很不方便，是否可以支持写成一个加载组件的方法 2 是否支持区分生产和开发环境，因为开发环境使用懒加载会导致热更新，导致更新变慢，所以开发环境使用全量默认加载，生产环境使用懒加载

解决方案

1 webpack的路径使用变量拼接，必须预先给出一个相对路径，然后把具体的组件路径在传入 2 用一个箭头函数，将需要传入的组件名或者相对路径传入 3 用process.env.NODE_ENV确定使用哪种加载方式

代码如下： 在原来的router/index.js中，定义一个加载组件的_import方法。

// router/index.js 
const _import = require('./_import_' + process.env.NODE_ENV)

//使用时
 {
      path: '/',
      name: 'HelloWorld',
      component: _import('HelloWorld')
    },

// router/_import_development.js
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

// router/_import_production.js 如果你加载的vue不是这个路径 请自定义哦
module.exports = file => () => import('@/views/' + file + '.vue')

最后

感谢PanJiaChen的vue-element-admin项目提供的实现思路