到目前为止，ES6的导入和导出总是编译为CommonJS，所以使用其中一个没有好处。尽管推荐使用ES6，因为当浏览器发布本机支持时，它应该是有利的。原因是，你可以从一个文件中导入部分，而使用CommonJS，你必须需要整个文件。

ES6→导入，导出默认，导出

CommonJS→require, module。出口,exports.foo

下面是它们的常用用法。

ES6导出默认值

// hello.js
function hello() {
  return 'hello'
}
export default hello

// app.js
import hello from './hello'
hello() // returns hello

ES6导出多个和导入多个

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
export { hello1, hello2 }

// app.js
import { hello1, hello2 } from './hello'
hello1()  // returns hello1
hello2()  // returns hello2

CommonJS module.exports

// hello.js
function hello() {
  return 'hello'
}
module.exports = hello

// app.js
const hello = require('./hello')
hello()   // returns hello

CommonJS模块。出口多

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
module.exports = {
  hello1,
  hello2
}

// app.js
const hello = require('./hello')
hello.hello1()   // returns hello1
hello.hello2()   // returns hello2

主要优势是句法上的:

更多的声明性/紧凑语法 ES6模块基本上会让UMD(通用模块定义)过时——基本上消除了CommonJS和AMD(服务器vs浏览器)之间的分裂。

使用ES6模块你不太可能看到任何性能上的好处。你仍然需要一个额外的库来捆绑模块，即使在浏览器中完全支持ES6特性。

您可能需要考虑以下几种用法/功能:

要求:

你可以动态加载加载的模块名不是 预定义的/静态的，或者你有条件地加载一个模块仅当 它是“真正需要的”(取决于特定的代码流)。 加载 同步的。这意味着如果你有多个需求，它们就是 一个接一个地装载和处理。

ES6进口:

你可以使用 命名导入可选择性地只加载您需要的部分。可以 节省内存。 导入可以是异步的(在当前的ES6 Module Loader中，它实际上是异步的)，并且可以执行得更好一些。

同样，Require模块系统也不是基于标准的。现在ES6模块已经存在，它不太可能成为标准。在未来，在各种实现中会有对ES6模块的原生支持，这将在性能方面具有优势。

到目前为止，ES6的导入和导出总是编译为CommonJS，所以使用其中一个没有好处。尽管推荐使用ES6，因为当浏览器发布本机支持时，它应该是有利的。原因是，你可以从一个文件中导入部分，而使用CommonJS，你必须需要整个文件。

ES6→导入，导出默认，导出

CommonJS→require, module。出口,exports.foo

下面是它们的常用用法。

ES6导出默认值

// hello.js
function hello() {
  return 'hello'
}
export default hello

// app.js
import hello from './hello'
hello() // returns hello

ES6导出多个和导入多个

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
export { hello1, hello2 }

// app.js
import { hello1, hello2 } from './hello'
hello1()  // returns hello1
hello2()  // returns hello2

CommonJS module.exports

// hello.js
function hello() {
  return 'hello'
}
module.exports = hello

// app.js
const hello = require('./hello')
hello()   // returns hello

CommonJS模块。出口多

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
module.exports = {
  hello1,
  hello2
}

// app.js
const hello = require('./hello')
hello.hello1()   // returns hello1
hello.hello2()   // returns hello2

不确定为什么(可能是优化-延迟加载?)它是这样工作的，但我注意到，如果导入的模块不使用，导入可能无法解析代码。 在某些情况下，这可能不是预期的行为。

以讨厌的Foo类为例。

foo.ts

export default class Foo {}
console.log('Foo loaded');

例如:

index.ts

import Foo from './foo'
// prints nothing

index.ts

const Foo = require('./foo').default;
// prints "Foo loaded"

index.ts

(async () => {
    const FooPack = await import('./foo');
    // prints "Foo loaded"
})();

另一方面:

index.ts

import Foo from './foo'
typeof Foo; // any use case
// prints "Foo loaded"

使用其中一种是否有性能上的好处?

目前的答案是否定的，因为目前没有一个浏览器引擎实现从ES6标准的导入/导出。

一些比较图表http://kangax.github.io/compat-table/es6/没有考虑到这一点，所以当你看到几乎所有的绿色Chrome，只是小心。没有考虑ES6中的import关键字。

换句话说，包括V8在内的当前浏览器引擎不能通过任何JavaScript指令从主JavaScript文件中导入新的JavaScript文件。

(在V8根据ES6规范实现之前，我们可能还会有几个bug或几年的时间。)

这个文件是我们需要的，这个文件是我们必须遵守的。

ES6标准说，模块依赖关系应该在我们读取模块之前就存在，就像在编程语言C中，我们有(headers) .h文件一样。

这是一个经过良好测试的结构，我相信创建ES6标准的专家们已经考虑到了这一点。

这使得Webpack或其他包捆绑器能够在某些特殊情况下优化包，并减少一些不需要的依赖包。但在完全依赖的情况下这永远不会发生。

导入/导出本地支持将需要一段时间，并且require关键字在很长一段时间内不会去任何地方。

需要什么?

这是node.js加载模块的方式。(https://github.com/nodejs/node)

Node使用系统级方法读取文件。在使用require时，你基本上依赖于它。require将在一些系统调用中结束，如uv_fs_open(取决于结束系统，Linux, Mac, Windows)，以加载JavaScript文件/模块。

要检查这是否正确，请尝试使用Babel.js，您将看到import关键字将被转换为require。