在前端开发中，减小首次加载时间是提高用户体验的关键。一种常见的做法是将应用代码分成多个chunks，然后按需加载。这样可以将初始加载时间缩短，但是当用户访问到某些不常用功能时，可能会遇到动态加载的延迟。这时候，使用动态加载器（Dynamic Importer）可以解决这个问题。
什么是动态加载器？
动态加载器是一个API，允许你异步地导入模块。这意味着你可以在需要的时候才加载代码，而不是在页面加载时就加载所有的代码。
动态加载器的语法非常简单：
import('./path/to/module')使用动态加载器进行代码分裂
我们来看一个例子。假设我们正在构建一个电商网站，其中有一个“购物车”页面，用户可以在这里查看他们添加到购物车中的商品。对于大部分用户而言，这个功能不是非常重要。因此，我们想把这个功能单独打包成一个chunk，并在需要的时候再加载它。
首先，我们需要将“购物车”页面的代码与其他页面的代码分离。我们可以使用Webpack的dynamic import特性来实现这一点：
// app.js
const button = document.querySelector('#cart-button');
button.addEventListener('click', () => {
import('./shopping-cart')
.then(module => module.showCart())
.catch(error => console.error("An error occurred while loading the shopping cart", error));
});在这个示例中，我们使用了动态加载器来加载“shopping-cart”模块。当用户点击“购物车”按钮时，我们会异步地加载这个模块，并调用它的“showCart()”方法。
现在，我们需要将“shopping-cart”模块单独打包成一个chunk。我们可以使用Webpack的代码分离功能来实现这一点。在Webpack配置中，我们可以指定一个“entry”点和多个“output”点：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
---- ---------------
----- ------------------------
--
------- -
--------- ------------
----- --------- - -------
-
--在这个示例中，我们指定了两个入口点：“app”和“cart”。Webpack会将这两个入口点的代码打包成两个不同的文件。
总结
动态加载器是一种非常有用的工具，可以帮助我们解决应用程序的代码分离问题。通过将代码打包成多个chunks并按需加载，我们可以显著减少页面的初始加载时间，并提高用户体验。
示例代码：
-- -------------------- ---- -------
-- ------
----- ------ - ---------------------------------------
-------------------------------- -- -- -
-------------------------
------------ -- ------------------
------------ -- ----------------- ----- -------- ----- ------- --- -------- ------ --------
---
-- -----------------
-------------- - -
------ -
---- ---------------
----- ------------------------
--
------- -
--------- ------------
----- --------- - -------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10242
