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

要求:

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

ES6进口:

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

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

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

要求:

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

ES6进口:

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

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

使用ES6模块可以用于“摇树”;例如，启用Webpack 2、Rollup(或其他捆绑程序)来识别未使用/导入的代码路径，因此不会将其放入最终的捆绑程序中。这可以通过消除你永远不需要的代码来显著减少它的文件大小，但是默认情况下与CommonJS绑定，因为Webpack等人无法知道是否需要它。

这是使用代码路径的静态分析来完成的。

例如，使用:

import { somePart } 'of/a/package';

．.． 给捆扎者一个包装的暗示。anotherPart不是必需的(如果它没有被导入，它就不能被使用——对吧?)，所以它不会费心捆绑它。

为了在Webpack 2中启用这个功能，你需要确保你的编译器不会吐出CommonJS模块。如果你正在使用带有babel的es2015插件，你可以像这样在.babelrc中禁用它:

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

Rollup和其他工具的工作方式可能不同——如果您感兴趣，请查看文档。

主要优势是句法上的:

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

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

我个人使用import，因为我们可以通过import导入所需的方法和成员。

import {foo, bar} from "dep";

文件名:dep.js

export foo function(){};
export const bar = 22

这要归功于单霁翔。更多信息。

到目前为止，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