前言
随着前端项目变得越来越复杂，一些模块文件的大小也随之增长。为了提高网页性能和用户体验，前端开发者需要在页面渲染时仅加载必要的模块，而不是一次性加载所有的模块文件。
在 ES6 模块中，可以使用 import() 动态加载模块，但是在一些老版本的浏览器中并不支持。因此，我们需要一个能够在任何浏览器中都能兼容的解决方案。
这时就出现了一个名为 dynamic-import-iife 的 NPM 包，它提供了一种兼容浏览器的动态加载模块的解决方案。在本文中，我们将详细介绍如何使用这个包。
安装和使用
首先，需要在项目中安装 dynamic-import-iife 包。使用以下命令即可安装：
--- ------- -------------------
在需要动态加载其他脚本的 JS 文件中，加入以下代码：
--------- --------- -
-------- ----------- - --- ---- - -- -- -- ---------------------------- ---------- - ----- -
--- ------- - ---
--------- -- -
--- -------
--- ---- - - -- - - --------------- ---- -
------ - -----------
-------------------- ---------- ---------
-
------------------
-----
----
-
-------- -------- -------- -
-- -----------
---------------------
--
-----
----
--
-
-------- -------- -------- -
-- -----------
---------------------
--
-----
----
-
---在上述代码中，我们将要加载的模块都放在了数组 modules 中，并且传递了每个模块的内容（也就是代码）到这个数组中。
在浏览器中运行这段代码后，它会动态加载所有的模块，并输出它们的内容到控制台中。
示例代码
假设我们有以下例子中的两个 JS 文件：
example1.js
------ -------- ------- - ------------------ --------- - ------ -------- --------- - -------------------- --------- -
example2.js
------ - ----- - ---- ------------- -------- ----- - ------------------- -------- - ------
我们可以使用以下代码动态加载这两个模块：
--------- --------- -
-------- ----------- - --- ---- - -- -- -- ---------------------------- ---------- - ----- -
--- ------- - ---
--------- -- -
--- -------
--- ---- - - -- - - --------------- ---- -
------ - -----------
-------------------- ---------- ---------
-
------------------
-----
----
-
-------- -------- -------- -
------------------------------ ------------- - ------ ---- ---
-------- ------- -
------------------ ---------
-
------------- - ------
-------- --------- -
-------------------- ---------
-
--------------- - --------
--
-----
----
--
-
-------- -------- -------- -
------------------------------ ------------- - ------ ---- ---
--- ------------- - -------------------------
-------- ----- -
-------------------
----------------------
-
------
--
- ---------------- - --
----
-
---结论
使用 dynamic-import-iife 包，我们可以在浏览器环境下动态地加载模块，而不需要使用 ES6 的 import()。这个包是非常有帮助的，特别是在老版本的浏览器中使用。我们可以把所有要动态加载的模块放在一个数组中，再动态地加载它们。
希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/91829