Webpack required.ensure 在 Webpack2 之后的替代方案
Webpack 是一个强大的前端构建工具和打包工具，它支持许多有用的功能来简化前端开发和优化项目结构。其中之一就是 required.ensure 函数，它有助于异步加载代码，实现代码分离和优化应用程序性能。然而，在 Webpack2 及更高版本中，require.ensure 已经不再推荐使用，因为它已被替代。在本文中，我们将讨论替代方案，并提供示例代码以指导读者。
Webpack2 提供了两个新的函数来替代 require.ensure: import() 和 System.import()。它们的语法非常相似，但是有着微妙的区别。
首先，让我们看看 import() 函数，它是 ES6 标准中的一部分，因此可以执行动态导入。该函数需要一个参数，该参数是一个字符串，表示要导入的模块的路径。这个字符串可以是静态的或动态的，它取决于你想要使用的模块的文件名或模块路径是否是已知的或存在的。
在模块被导入后，它会返回一个 Promise，这个 Promise 会在模块被加载完毕后被解析，以便你可以使用导入的模块中的代码。以下是一个简单的示例，演示了如何使用 import() 函数的基本语法。
import('./module.js')
.then(module => {
// use the imported module
})
.catch(error => {
// handle the error
});接下来，我们来看看 System.import() 函数。这个函数不是 ES6 标准的一部分，但是已被添加到了 Webpack 中。与 import() 类似，System.import() 也需要一个参数，该参数是一个字符串，表示要导入的模块的路径。同样，该函数返回一个 Promise，该 Promise 将在模块被加载完毕后被解析。
然而，System.import() 有一个额外的功能，就是可以指定一个字符串作为模块名称，以便在加载模块时可以引用它。如果你没有指定这个参数，则可以从返回的 Promise 中访问已导入的模块。
以下是使用 System.import() 函数的示例代码：
System.import('./module.js')
.then(module => {
// use the imported module
})
.catch(error => {
// handle the error
});需要注意的是，除非你在 Webpack 配置文件中指定了其他设置，否则 Webpack 默认会将 System.import() 解析为 import()。
总结来说，虽然 require.ensure 函数在 Webpack 中被废弃了，但是可以通过 import() 和 System.import() 来代替。这两个函数都提供了异步加载模块的能力，以实现代码分离和提高应用程序性能。在开发过程中，建议使用这两个函数中的任何一个来替代 require.ensure 函数。
如果你仍然有困惑或疑问，请参考以下示例代码，以帮助你更好地理解并掌握 import() 和 System.import() 函数的用法。
-- -------------------- ---- -------
-- ------- ----- --------
-- ------
------ -------- ---------- -
----------------------
-
-- --------
------------------
------------ -- -
------------------
--
------------ -- -
-------------------
---
-- ------- ----- ---------------
-- ------
------ -------- ---------- -
----------------------
-
-- --------
-------------------------
------------ -- -
------------------
--
------------ -- -
-------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654dcf657d4982a6eb73118c