前端开发中经常需要使用到各种常用的 JavaScript 库，而这些库都是通过 npm 包来进行管理和安装的。在使用这些库时，我们会遇到一些问题，如加载时间过长、兼容性问题等。本文介绍一个可以优化加载时间的 npm 包 defer-esm，主要内容包括 defer-esm 的使用方法、原理和示例代码等。
1. 什么是 defer-esm
defer-esm 是一个专为 ES 模块所设计的 npm 包，可以在加载 ES 模块时，利用浏览器支持 deferred 的 ES 模块加载，加速页面加载速度。
2. 如何使用 defer-esm
在使用 defer-esm 之前，请先确保您的项目支持 ES 模块的加载方式，同时确保您已经安装了 npm。
- 安装 defer-esm
在命令行中使用以下命令安装 defer-esm：
npm install defer-esm
- 加载模块
在 HTML 中通过以下方式加载模块（示例为加载 vue.js）：
<script type="module" defer src="./node_modules/defer-esm/esm.js"></script> <script type="module" defer src="./node_modules/vue/dist/vue.esm.browser.js"></script>
以上代码中，第一个 script 标签用于加载 defer-esm，第二个 script 标签用于加载 vue.js。
3. defer-esm 的原理
defer-esm 主要依赖于浏览器所支持的 ES Module 的 deferred 加载方式，其能优化页面加载速度的主要原因在于：通过添加 defer 和 type 属性，将加载过程移动到了后台，不会阻塞页面的渲染和响应。
在没有使用 defer-esm 的情况下，浏览器会根据 script 标签的顺序来逐个请求加载，并在加载完成后再继续进行后续的操作。
而使用 defer-esm 后，浏览器将会进行同步请求，预先将需要加载的模块信息收集好，分析并安排好加载的顺序，等到 DOMContentLoaded 事件被触发后再开始加载所有的模块。这样便能够减少因脚本阻塞导致的页面等待时间，从而加速页面加载速度。
4. defer-esm 的示例代码
以下示例代码演示了如何在项目中使用 defer-esm 让 HTML 加载速度更快：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ----------
-------
------
---- ---------
---- ----- --- -------------------- ---
----- -------- ------
------
------- ------------- ----- -----------------------------------------------
------- ------------- ----- ----------------------------------------------------------
------- ------------- ----- ------------------------
-------
-------以上代码中，我们在 script 标签中添加 defer 和 type 属性，加载 defer-esm 和 vue.js。同时，我们还加载了一个名为 app.js 的模块，其内容如下：
import Vue from './node_modules/vue/dist/vue.esm.browser.js'
const app = new Vue({
el: '#app',
data: {
greeting: 'Hello, world!'
}
})app.js 模块中预先导入了 Vue，并在 DOMContentLoaded 事件触发后根据需要进行渲染和响应。
5. 总结
defer-esm 是一个可以优化加载时间的 npm 包，通过将 ES 模块的加载过程移动到后台，加速页面加载速度。在使用它时，需要注意：在加载模块前必须先加载 defer-esm，且需要确保项目的 ES 模块加载方式已正确配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573b081e8991b448e9ace