import 和require的区别

• import 是es6语法，编译时调用，值的引用
• require是运行时调用用， 值的拷贝

代码演示

//example.js
module.exports = {
    say: 'hi'
}

//main.js
require('./example').say = 'hello'
const test = require('./example').say
console.log(test)       //hello

上面的test重新引入example， 但它的say属性还是上面的hello， 说明并没有从新加载example模块， 而是从缓存中获取的该模块， 所以say属性不是hi

// base.js
export var foo = 'bar';
setTimeout(() => foo = 'baz change', 500);

// main.js
import { foo } from './base';
console.log(foo); // bar
setTimeout(() => console.log(foo), 600);// baz changed

上面代码可以看到， 两次获取的foo值是不同的， 因为import是动态加载， 可以感知到base.js中的变化. 这样的设计，可以提高编译器效率，但是没有办法实现运行时加载。

import 函数

import为了实现动态加载， 引入了import()函数， 该函数返回一个promise对象。

import(`./xxxx.js`)
  .then(module => {
    ...
  })
  .catch(err => {
    ...
  });

参考

• 关于import和require的一点理解 (opens new window)