1 实现路由开发阶段不懒加载, 生产阶段懒加载

1 实现路由开发阶段不懒加载, 生产阶段懒加载

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

component: _import('project/portal/portalIndex')

作用:
这个应该是判断打包环境决定组件是否采用懒加载的方式，假如是production，则懒加载，假如是dev，则不采用懒加载。
因为在dev是不懒加载,虽然第一次启动慢,但之后热更新比较快，改代码后看效果不需要等待太久。

1.1

首先要知道一下两者的区别
    const fn = (data)=>{console.log(data);}
    fn(4)
    //这里fn其实是箭头函数名, 等价于
    //function fn(data){console.log(data);}
    //fn(4)

    const fn = console.log(123456);
    fn
    //这里fn就是整个函数, 写fn等价于写console.log(123456);
    //如果写fn()会报错, fn is not a function

所以可知
component: _import('project/portal/portalIndex')
等价于
component: require('./_import_' + process.env.NODE_ENV)('project/portal/portalIndex')

1.2 process.env.NODE_ENV

process.env.NODE_ENV

1 process.env 是 Node.js 中的一个环境对象。
2 在 Vue 中，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入。
npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。

一句话:
是vue自动配置的,当npm run dev时, process.env.NODE_ENV的值=development

1.3 目录中的_import_development.js与_import_production.js

router目录
router
|---- modules
|    |---- router.js
|---- _import_development.js
|---- _import_production.js
|---- before.js
|---- index.js

当npm run dev时, 
component: require('./_import_' + process.env.NODE_ENV)('project/portal/portalIndex')
等价于
component: require('./_import_development')('project/portal/portalIndex')

1.4 开发阶段不懒加载

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

这里module.exports暴露了一个匿名箭头函数
匿名(file){
    return require('@/views/' + file + '.vue').default
}
component: require('./_import_development')('project/portal/portalIndex')
等价于:
component: 匿名('project/portal/portalIndex')
即: 
component: require('@/views/' + 'project/portal/portalIndex' + '.vue').default

1.5 生产阶段懒加载

_import_production.js文件
module.exports = file => () => import('@/views/' + file + '.vue')

这里module.exports暴露了一个匿名柯里化箭头函数

component: require('./_import_production')('project/portal/portalIndex')
等价于:
component: 匿名('project/portal/portalIndex')
即: 
component: () => import('@/views/' + 'project/portal/portalIndex' + '.vue')

1.6 函数柯里化

函数柯里化

柯里化（currying）指的是将一个多参数的函数拆分成一系列函数，每个拆分后的函数都只接受一个参数（unary）
function add (a, b) {
  return a + b;
}
add(1, 1) // 2

柯里化就是将上面的函数拆分成两个函数，每个函数都只接受一个参数。
function add (a) {
  return function (b) {
    return a + b;
  }
}
// 或者采用箭头函数写法
const add = x => y => x + y;
const f = add(1);

console.log(f); //function (b) { return a + b; } 或   y => x + y
注意这里,虽然没有显示 return 1 + b , 但下边可以显示3, 就说明这里其实是return 1 + b的. 只是console.log的问题
console.log(f(2)); //3

实现生产阶段懒加载
component: require('./_import_production')('project/portal/portalIndex')
module.exports = file => () => import('@/views/' + file + '.vue')
等价于:
component: () => import('@/views/' + 'project/portal/portalIndex' + '.vue')

1.7 require('').default

最近项目开发中，在代码中看到require('./routes').default，为什么要添加default呢？

方式1：在index.js中使用ES6的import方法导入方式require引入router模块
//index.js中导入router.js中的router模块
import router from './router'

方式2：在index.js中使用CommonJS的模块导入方式require引入router模块，则需要使用 .default 来获取实际的组件选项
//index.js中导入router.js
const router = require('./routes').default;

使用babel@6的版本才必须.default
原因还没看明白