前言
在前端开发过程中，我们经常会使用 import 和 require 两种方式来加载模块文件，这两种方式在 ES9 中有哪些区别呢？本文将介绍它们的用法、区别以及一些示例代码。
import()
import() 是 ES9 引入的动态模块加载方式，它支持异步加载模块。它的使用方法如下：
import(moduleName)
.then(module => {
// 模块加载成功后执行的代码
})
.catch(error => {
// 模块加载失败后执行的代码
});其中，moduleName 为模块名称，可以是字符串或带变量的字符串。使用 import() 加载模块时，返回一个 Promise 对象。如果加载成功，则返回模块对象；如果加载失败，则抛出一个错误。
import() 的优势
1. 支持异步加载
import() 支持异步加载模块，这就使得页面加载的时候可以先加载一些必要的模块，然后在需要的时候再动态加载其他模块。
2. 提高性能
动态加载模块可以使得页面加载速度更快，由于不需要一次性加载所有模块，可以减少页面的首次加载时间，从而提高性能。
require()
require() 是 Node.js 提供的模块加载方式，它同样可以加载模块并返回一个对象。它的使用方法如下：
const module = require("moduleName");其中，moduleName 为模块名称，可以是字符串或变量。使用 require() 加载模块时，返回一个对象，该对象包含了该模块的所有导出值。
require() 的优势
1. 相对路径加载
require() 可以使用相对路径加载模块，使得模块文件的路径更加精确，避免了路径错误的问题。
2. 对全局变量的支持
require() 可以访问全局变量，这使得其中的模块加载相对容易。
区别
1. 返回值类型不同
import() 返回一个 Promise 对象，需要使用 then() 和 catch() 方法来获取模块加载的结果，而 require() 直接返回一个对象。
2. 使用方式不同
import() 和 require() 的使用方式也略有不同。import() 是异步加载， require() 是同步加载。require() 还支持相对路径和全局变量的访问，而 import() 不支持相对路径和全局变量的访问。
示例代码
1. import() 示例代码
-- -------------------- ---- -------
---------------------
------------ -- -
-- ------------
--------------
--
------------ -- -
-- ------------
-------------------
---2. require() 示例代码
const module = require("./module.js");
module.func();总结
import() 和 require() 都是模块加载方式，它们的异同点大概如上所述。我们可以根据需求选择不同的模块加载方式，以达到更好的效果。在适当的时候使用 import() 可以加快页面加载速度，提高用户体验。而在编辑器中、Node.js 中、其它一些环境中，我们可以使用 require() 加载模块。总体来说，对于前端开发而言，了解这两种模块加载方式的异同点也是很必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64735580968c7c53b00cbc0a