Webpack 是一个流行的打包工具，它使得前端开发人员可以将代码打包成一个或多个文件。在 Webpack 中，我们可以使用 import 语法来导入模块或代码块。但是在某些情况下，我们希望在程序运行时动态加载代码块，而不是在编译时将代码块打包进入 bundle 中。
在 ES2020 中，新增加了一个 import() 函数，允许我们动态地加载代码块。这个函数返回一个 Promise 对象，可以在异步加载完成后使用 then 方法来处理加载的代码块。这个函数可以在 Webpack 中很好地运行，并且使得我们可以实现动态加载代码块的功能。
使用示例
让我们来看一个简单的示例。我们有一个 lazy.js 文件，它导出了一个默认的函数：
// lazy.js
export default function lazy() {
console.log("This is a lazy function");
}在我们的主文件中，我们可以使用 import() 函数来加载这个文件。这个函数会在程序运行时异步地加载 lazy.js 文件：
// main.js
async function loadLazy() {
const module = await import("./lazy.js");
module.default();
}
loadLazy();注意，我们必须使用 await 来等待异步加载完成。在加载完成后，我们可以访问模块并调用其中的默认函数。
加载自定义模块
当然，在实际项目中，我们可能需要加载更复杂的模块。这里提供一个示例，使用 import() 函数来加载一个自定义模块。
假设我们有一个 button.js 文件，它导出了一个 Button 类。这个类接受一个配置对象，并返回一个带有特定风格和事件处理程序的 DOM 元素。
-- -------------------- ---- -------
-- ---------
------ ------- ----- ------ -
------------------ ------ --------- -
----- ------ - ---------------------------------
---------------- - -----
------------ - ------
-------------------------------- ---------
------ -------
-
-现在我们想要在另一个文件中使用这个类。我们可以使用 import() 函数来动态加载这个模块，并调用它的构造函数来创建自定义按钮。
-- -------------------- ---- -------
-- ---------
----- -------- ------------ -
----- --------- ------- - ----- ----------------------
----- ------ - --- --------
----- ------ ----
------ ------- ------
-------- -- -- ---------- ------- -----
---
----------------------------------
-
-------------在这个例子中，我们使用解构语法来获取导出的 Button 类，然后使用它来创建一个自定义按钮。注意，我们必须使用 default 属性来获取默认导出的类。
Webpack 配置
在 Webpack 中使用 import() 函数并不需要特殊的配置。只需要将代码分割成合适的块，Webpack 会自动将代码块分离成单独的文件。
如果你想手动指定代码块的文件名，可以使用 chunkFilename 选项：
// webpack.config.js
module.exports = {
output: {
filename: "[name].[contenthash].js",
chunkFilename: "[name].[contenthash].js"
}
};这将会生成 chunkFilename 表示的文件名格式，其中 [name] 表示代码块的名称，[contenthash] 表示代码块的哈希值。
结论
利用 ES2020 的 import() 函数和 Webpack，我们可以在程序运行时动态加载代码块，这使得我们能够更好地管理代码和资源。使用这个技术，我们可以实现按需加载代码块，减小文件大小和代码复杂度，从而提高程序的运行效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb3d68447136260159e917