在前端开发过程中，webpack 已经成为至关重要的工具，它可以帮助我们将多个 JavaScript 文件打包成一个文件，以减少加载时间并使用 Tree Shaking 等技术优化代码。不过，webpack 打包后的代码文件可能会变得非常大，导致应用首次加载时间过长。为了解决这个问题，我们可以将应用代码分成多个 chunk，并异步加载这些 chunk。而 asyncchunks-assets-webpack-plugin 就是一款方便地异步加载webpack异步代码chunk的插件，本文将详细介绍它的使用方法。
安装
安装插件的命令如下：
--- ------- --------------------------------- ----------
异步加载
通常情况下，webpack 打包的 JavaScript 文件存在于 dist 目录下，我们可以在 HTML 文件中引用这些文件来加载应用。但是通过这种方式，如果应用的 JavaScript 文件过大，将会导致首次加载时间过长。因此，我们可以使用异步加载的方式，将应用代码分成多个 chunk，并在需要的时候异步加载这些 chunk，以减少首次加载时间。下面是一个例子：
在 index.js 中，我们将应用代码分成了两个部分：
-- --------
----------------- -- --- ----- --------
----------------
------------ -- -
--------------------
--
---------- -- -
-------------------
---其中 import('./lazy') 就是异步加载代码的方式。代码将会在运行时动态的加载，而不是在构建时打包进去，不仅减少了首屏 js 的大小，同时也不会立即暴露模块，减少了强耦合情况的可能性。
在 lazy.js 中，我们将应用代码的另一部分定义为一个模块：
-- ------- ----------------- -- --- ---- ----------
当然，我们需要在 webpack 的配置文件中启用代码分离。下面是一个精简的 webpack 配置文件示例：
-- -----------------
----- ----------------------- - ---------------------------------------------
-------------- - -
------ -----------------
----- -------------
------- -
--------- ------------------------
----- --------- - -------
--
-------- -
--- -------------------------
----------- ----------------
--
-
--在这里我们定义了一个 mode 属性来确定构建的环境，output 属性定义了构建后的文件生成路径和名称。在这个配置中，我们定义了一个插件 AsyncChunksAssetsPlugin 和一个 assetsName 属性，后者用于指定插件生成的文件名。下面是插件的具体使用方法。
插件使用
asyncchunks-assets-webpack-plugin 插件用于生成异步加载的代码的资源映射关系文件，以便在 HTML 中加载资源。该插件提供了许多选项来帮助我们更好地控制异步加载的行为，例如 jsonpFunction、jsonpScriptType、crossOriginLoading、manifestFilename 等。使用该插件需要在 webpack 配置中添加以下内容：
-- -----------------
----- ----------------------- - ---------------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------------
----------- ----------------
--
-
-在这个例子中，我们通过 assetsName 属性指定了插件生成的文件名为 my-assets.json。当插件开始工作时，它会在 output.path 目录下生成该文件。生成的内容类似于这样：
- ---------- - ----------------------------- -- --------- --- ---------- - --------------------------------- - -
在这个例子中，我们有三个 chunk，分别是 app、vendors 和 styles，对应的文件 URL 存储在 scripts、vendors 和 styles 中。前两个 chunk 是 js 文件，最后一个 chunk 是 css 文件。如此生成的数据可以精确定位到需要在页面中异步加载的资源。
下面是一个示例 HTML 文件：
--------- -----
----- ----------
------
----- ----------------
---------------------------------------- ------------
-------
------
---- ---------------
------- ------------------------
------- -----------------------
----------- -
--- ---- - -------------------------------
--- ------ - ---------------------------------
---------- - -------------------
------------- - ---------- -
-- --------- ----- --
-------------- - --------------
--- ------------- - --- ------------------------- ------- -
--- ------------- - ---------------------------------------------------------
--------------------------------------- --------
-------------------------------------- ---------- -
-----------------------
---
---
----------------------------------- -
------------------------------------ -----
------------------------ -
-----------------------------
---
--
------------------------------------ ------------------
-----
---------
-------
-------在这个示例中，我们首先向 HTML 中插入了一个 id 为 app 的 DOM，然后插入了一个普通的 script 标签来加载应用的入口文件。接着，在 JavaScript 中，我们通过 AJAX 加载了插件生成的 my-assets.json 文件，并使用 Promise 连续调用的方式来异步加载所有需要的 JS 文件。
这是通过异步加载代码的一种方式，当然这只是一种简单的方式，我相信大家可以根据自己的项目特点，做出更好更高效的异步加载方式，之后便可以使用插件中 assetsName 指定的资源映射关系文件中的 scripts、styles 等属性的文件名，以减少首次加载时间。
结论
在这篇文章中，我们详细介绍了如何使用 asyncchunks-assets-webpack-plugin 插件来优化前端应用的首次加载时间。我们学习了异步代码加载的基本知识，并展示了如何在 HTML 文件中异步加载我们的应用。最后，我们介绍了如何使用该插件来生成异步加载的资源映射关系文件，该文件可以帮助我们更好地控制异步加载的行为，在我们的应用中实现更好的性能和用户体验。如果学会了以上内容，相信大家今后在使用 webpack 打包的过程中，能够更好的优化代码体积以及提升用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005591e81e8991b448d6911