在前端开发中，对页面进行异步加载和懒加载是必不可少的，特别是在移动端网络环境不太好的情况下，异步加载和懒加载可以大大提升页面的加载速度和用户体验。而 enb-async-require 这个 npm 包则能帮助我们实现这项技术。
什么是 enb-async-require
enb-async-require 是一个处理异步加载和懒加载的工具，它可以帮助我们在页面运行时动态的加载代码。这个工具是基于 ENB 技术，ENB（Extendable Node Builder）是一个可扩展的 Node.js 模块打包工具，它打包过程中采用增量式的方法，能够减少文件重复的打包，提高打包效率。
如何安装 enb-async-require
安装 enb-async-require 很简单，只需要在命令行中运行以下代码即可：
npm install --save-dev enb-async-require
如何使用 enb-async-require
配置 enb-async-require
使用 enb-async-require，我们需要在项目的 ENB 配置文件中进行配置。在项目根目录中创建 .enb/make.js 文件，文件内容如下：
-- -------------------- ---- -------
--- ------------ - -----------------------------
-------------- - ---------------- -
-- --------
-----------------
------------------------- -
------- ---------------------
------------ -----------
--
---
-- ------
-------------------------- ---------- -
---------------------- -------------------- -
---------------------
---------------------- -
------- -------------
------- -------
--
---
---
---
--上面的代码中，使用了异步加载许可和打包异步模块两个 ENB 技术。其中异步加载许可是对异步模块的许可控制，实现了异步模块的安全和版本控制。打包异步模块则是将异步模块打包成一个文件，便于在页面中引用。
使用 enb-async-require
接下来就可以在页面中使用 enb-async-require 了。对于需要进行异步加载或懒加载的模块，在其对应的 JS 文件中添加如下代码：
var asyncRequire = require('enb-async-require');
asyncRequire.async(['my-module', 'my-module-2'], function(myModule, myModule2) {
// 异步执行
});上面的代码中，通过 asyncRequire.async 方法来异步加载模块，参数为模块名数组和回调函数。当模块都加载完成后，异步执行回调函数。
示例代码
下面是一个完整的示例代码，其中有两个模块需要进行异步加载：
-- -------------------- ---- -------
--- ------------ - -----------------------------
------------------------------- ------------ ----------------- -------- -
---------------------
---------------------
---
-- -----------
-------- --------- -
------------------------
-
-- -----------
-------- --------- -
------------------------
-
--------------- - --------
--------------- - --------总结
enb-async-require 是一个非常好用的处理异步加载和懒加载的工具，它可以帮助我们实现在页面运行时动态的加载代码，提高页面的加载速度和用户体验。在使用 enb-async-require 的时候，我们需要在 ENB 配置文件中进行配置，并在页面中使用 asyncRequire.async 方法来异步加载需要的模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77628