关于module的require和import的区别

require()/import命令/import()函数区别：

• require是运行时加载，即动态加载。而import命令是静态加载，在编译时就加载。
• import()函数是动态加载，与require不同的是，import()函数返回一个promise，是异步加载。而require是同步加载。

import()函数使用场景：

• 按需加载

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。

• 条件加载

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

import()函数可以嵌套在if代码块中，若是import命令就会报错，因为import命令是在编译时执行的。

• 动态的加载路径

import()允许模块路径动态生成。

import(f())
.then(...);

上面代码中，根据函数f的返回结果，加载不同的模块。