手摸手学前端：Vue router路由之import 与 require 使用区别以及懒加载

node编程中最重要的思想就是模块化，import和require都是被模块化所使用。

import 与 require 区别：

遵循规范

• require 是 AMD规范引入方式
• import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

调用时间

• require是运行时调用，所以require理论上可以运用在代码的任何地方
• import是编译时调用，所以必须放在文件开头

本质

• require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
• import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

vue-router的定义方式

1. import方式

import Login from '@/views/Login'
import Home from '@/views/Home'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Home
  }
]

2. require方式，异步加载-组件异步加载即为路由的异步加载

export default [
    {
      path: '/userCenter',
      name: 'user-center',
      component: resolve => require(['@/page/userCenter/index.vue'], resolve)
    },
    {
      path: '/news/detail',
      name: 'news-detail',
      component: () => resolve => require(['@/page/news/detail.vue'], resolve)
    }
]

3. 官方默认的懒加载方式，用更加简单的写法来组织Vue异步组件和Webpack的代码分隔

export default [
    {
      path: '/news/detail',
      name: 'news-detail',
      component: () => import('@/page/news/detail.vue')
    }
]

4. webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}