什么是 d-l-l？
d-l-l 是一款前端的 npm 包，它是 dynamic load library 的缩写，意思是动态加载库。这个库可以实现将你的代码打包成多个文件，然后在需要的时候再去加载，以达到加快首屏渲染速度的目的。
如何使用 d-l-l？
使用 d-l-l 需要几个步骤：
安装 d-l-l
首先，你需要在你的项目文件夹下使用以下命令进行安装：
npm install --save-dev d-l-l
在 webpack 中设置动态加载
然后，你需要在你的 webpack 配置文件中使用 dynamic-public-path-webpack-plugin 这个插件来设置动态加载的路径。比如：
-- -------------------- ---- -------
----- ------------------------------ - ----------------------------------------------
----- ---------- - --------------------------- -- ---- --- --
----- ------------------------------ - --- -------------------------------- ---------- ---
-------------- - -
-- ---
-------- ---------------------------------
--使用 d-l-l 打包你的代码
接下来，你需要使用 d-l-l 来打包你的代码。比如：
-- -------------------- ---- -------
----- --------- - ------------------------------------
-------------- - -
------ -
-- --------------
----- ----------------
------- -
------
-------
--------
-------------
-
--
-------- -
--- -----------
----- ----------------
----- -----------------------------
---
--
--在这里，我们将需要打包的代码作为 entry 项，然后指定一些 vendor，这些 vendor 会被打包到一个叫做 vendor 的文件中。每个 entry 都会有一个独立的 manifest 字段，这个字段会被用来管理我们的打包文件。
在 HTML 文件中加载你的代码
最后，你需要在你的 HTML 文件中加载你的代码。比如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- ---------------------------- ------------------
--------- ---- ------------
------- ---------------------- ------------------------------------------------------------
-------
------
------- ---------------------- ------------------------------------------------------
-------
-------在这里，我们使用了之前设置的 CDN 地址来加载我们的文件。我们先加载 vendor，然后加载我们的应用程序。
结论
d-l-l 是一款非常强大的工具，可以帮助你加快应用程序的加载速度。但它也有一些坑点，比如使用不当会导致加载出错。因此，在使用 d-l-l 的时候，我们需要非常小心。因此，我们需要更好地理解它的实现原理以及使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590681e8991b448d6599