在前端开发中，也许你会遇到这样的问题：由于网站过于复杂，而导致的代码太长，需要很长时间才能加载完。当用户体验变差时，会影响到整个网站的使用体验。因此异步加载成了前端开发的重要一环。async-chunks 就是为解决此类问题而产生的一个 NPM 包。本文将为你介绍 async-chunks 的基本功能，帮助你快速上手使用。
一、简介
async-chunks 是一个适用于 Vue CLI 3.x 项目的自定义 webpack 插件。它可以通过自定义 webpack 插件来使 webpack 的自动代码分块功能变得更加智能。使用 async-chunks 可以帮助前端项目快速的加载主要资源，并在需要时才异步加载其他资源，以便更快地提高页面响应速度。
async-chunks 生成的代码块以 js、css、以及其他资源文件格式存储在 /js、/css 和 /other 目录下。这样既方便使用也方便阅读。
二、安装
使用 npm 安装 async-chunks：
npm install async-chunks
然后我们可以在 Vue CLI 3.x 的配置文件 vue.config.js 中引入即可：
-- -------------------- ---- -------
----- ------------------------ - -----------------------
-------------- - -
----------------- -
-------- -
--- --------------------------
-
-
-
然后就可以愉快的使用 async-chunks 了。
三、配置
async-chunks 有两个可配置参数：
- chunkName
- excludeAsyncChunks
其中：
chunkName 用来确定文件名称，如果不设置则会默认生成，格式为 [name].js 或 [name].css。
excludeAsyncChunks 可以用来排除不需要的异步加载代码块，以下是一个 configuration 的例子：
-- -------------------- ---- -------
----- ------------------------ - -----------------------
-------------- - -
----------------- -
-------- -
--- --------------------------
------------------- -
----------------
---------------
-------------
-
--
-
-
-
四、使用
我们假设有这样一个 Vue 组件：
-- -------------------- ---- -------
----------
-----
---- ------------------------
---- ------------
-------- --
------
------
-----------
--------
------ ------- ---- ----------------------
------ ------- -
----------- -
-------
--
---- -- -
------ -
----- -----
-
--
----- ------- -- -
----- ----------------
--------- - ----
--
-------- -
--------- -- -
------ --- --------------- -- -
------------- -- ---------- -----
--
-
-
-
---------
我们并不想在页面初次加载时异步加载 example.js 代码块，而是在 fetchData() 返回之后加载 example.js：
-- -------------------- ---- -------
----------
-----
---- ------------------------
---- ------------
-------- --
------
------
-----------
--------
------ ------- ---- ------------------
------ ------- -
----------- -
-------
--
---- -- -
------ -
----- -----
-
--
----- ------- -- -
----- ----------------
------------------
--
-------- -
--------- -- -
------ --- --------------- -- -
------------- -- ---------- -----
--
--
----------- -- -
-----------------
------------ -- -
--------------
--------- - ----
--
---------- -- -
------------------
--
-
-
-
---------
需要注意的是，在使用 async-chunks 动态加载 core.js、chunk-vendors.js、chunk-common.js 的过程中会遇到一些问题。我们可以通过 excludeAsyncChunks 参数来排除这些异步代码块。值得一提的是，由于 async-chunks 在生成异步代码文件时不再遵循 webpack 原来（使用默认配置的情况下）的 chunk 名称规则，部分类库（例如下载的ECharts）在异步加载时可能需要额外配置才能正确加载。上例中的 './Example.jsx' 为我们在 vue.config.js 中配置的 async-chunks 生成的路径和命名。
五、总结
async-chunks 是一个非常实用的组件，可以帮助前端开发者更加智能地使用 webpack 自动代码分块功能。本文从基本操作介绍到具体实例，详细地讲解了使用步骤和注意事项。希望本文能够帮助大家快速上手使用 async-chunks，并为前端开发提供一些小小的思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79008