vue 组件懒加载 import require

使用懒加载原因：

        像vue这种（spy）单页面应用，如果没有使用到懒加载，webpack打包的文件过大，造成进入首页时，加载的资源过多，时间过长，即使做了loading也不利于用户体验，而运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载事件，简单来说就是进入首页不用一次加载过多资源造成时间过长

问题背景(v-cli版本2.96)：

        路由懒加载在开发阶段的时候，随手改一行代码热更新都是要几千ms，导致等待过长。这里是异步加载导致 webpack 每次的 cache 失效了，所以每次的rebuild 才会这么的慢。

知识点概要：

        1.import/export与require/exports 区别

        require/exports 是运行时动态加载，import/export 是静态编译。

        CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。- 阮一峰

        2.懒加载 require和import（）的区别

          import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是可异步也可同步加载。

ps:require(['xx.js']，function(){})是异步加载,require('xx.js') 同步加载,关键在于第一个参数是否为数组以及第二个回调函数

解决方案：         1 webpack的路径使用变量拼接，必须预先给出一个相对路径，然后把具体的组件路径在传入

2 用一个箭头函数，将需要传入的组件名或者相对路径传入

3 用process.env.NODE_ENV确定使用哪种加载方式

这里针对module.exports = file => require('@/views/' + file + '.vue').default进行说明

        webpack 打包时支持 CommonJS、AMD 和 ES6 的模块化系统。我们通常写 .vue 单文件组件时，在 script 语言块中使用的是 ES6 的语法，使用 export default 进行默认导出。require 是 CommonJS（和 AMD，想不到吧？）的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件选项。或者使用 ES6 的 import 语句，ES6 的模块化导入导出语法参见 http://es6-features.org/#Valu...，import 时需要给定一个变量名，所有 import 语句必须统一放在模块的开头。

        如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法，导出的是 module.exports 对象作为组件选项，那么使用 require 导入时就不需要使用 .default 来获取。

学习来源：

https://www.jianshu.com/p/ddf574f4e290?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

https://segmentfault.com/q/1010000011171159

https://blog.csdn.net/wenmin1987/article/details/108838348?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control