随着前端应用复杂度的增加，webpack 已经成为了前端工程化中必不可少的工具。而在众多的插件和 loader 中，动态导入插件 (Dynamic Import Plugin) 可以帮我们实现模块的按需加载，提升应用的性能和用户体验，并且在 webpack4 中内置了支持。接下来，让我们详细了解动态导入的使用和打包优化。
动态导入的使用
在 ES2015 中，引入模块是通过 import 语句来实现的。在 webpack 中，动态导入可以通过使用import() 方法来实现。这个方法支持返回一个 Promise 对象，在 Promise 对象成功时，将返回一个模块对象。
import("./path/to/module")
.then(module => {
// do something with the module
})
.catch(err => {
// handle error
});其中，path/to/module 可以是相对路径或绝对路径，也可以是一个包含动态信息的变量，在运行时才会生成一个有效的路径。
这个特性为我们实现按需加载提供了很大的灵活性。根据不同的需求和场景，我们可以将其应用于不同的技术上。
动态导入的使用场景
1. 懒加载
懒加载是指将某些资源在需要时才进行加载。动态导入可以帮助我们实现懒加载，当用户点击某个按钮或者滚动到相应的位置时，相应的资源才会被加载并执行。
例如，我们可以将一个组件进行懒加载，只在需要使用它时才进行加载。
-- -------------------- ---- ------- -- ------ ------ --------- ---- -------------- -- ----- -- ---- ----- ------------- - -- -- --------- ----------------- ----------- -- --------------- -- ---- -- ----- --------- - -- -- --------- ----------------- ----------- -- ---------------
其中，/* webpackChunkName: "Component" */ 是 webpack 提供的特殊注释，它会将生成的模块命名为 Component，方便我们在开发者工具中进行调试。
2. 国际化
对于国际化应用而言，通常需要根据用户的语言环境来动态加载不同的语言包。
使用动态导入可以帮我们实现此功能。例如：
-- -------------------- ---- ------- -- ------ ------ -- ---- ------- ------ -- ---- ------- --- -------- - --- -- ----- --- ----- - -------- - --- - ---- - -------- - --- - -- ----- ----- -------- - ----- --------------------
3. 组件库
对于一些组件库来说，用户通常只需要使用其中的几个组件。如果一次性将整个组件库打包，会造成很大的性能浪费。
使用动态导入可以帮我们实现只加载需要使用的组件的功能。例如：
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - ------- ------ ---------- - ---- -------
-- -----
------ ----- ---- --------
----- ----------- - -- -- -
----- -------- ---------- - ---------------
----- ------- --------- - ---------------
----- ------------ -------------- - ---------------
------------ -- -
-------------
--------------------------
-------------------------
------------------------------
----------------- ------ ------------ -- -
--------------------------
------------------------
----------------------------------
---
-- ----
------ -
-----
------- -- ------------------------
------ -- ------ ------------------- ---
----------- -- ----------- ---
------
--
-在这个例子中，我们使用了 Promise.all 方法同时加载 Button、Input 和 DatePicker 组件，并使用 useState 来保存这三个组件，只有当这三个组件都被加载成功后才会显示在页面中。
打包优化
使用动态导入可以帮我们实现应用的按需加载，提升应用性能，但是也会给打包带来一些负担，我们需要针对这个问题进行优化。
webpack4 的内置优化
webpack4 内置了一些优化策略，下面主要介绍两种。
1. SplitChunksPlugin
该插件可以帮我们提取多个入口的公共依赖代码，如果一个依赖被不同的 chunks 引用了多次，那么这个依赖就会被提取出来，形成一个单独的 chunk。
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}使用了该插件后，webpack 将自动进行公共 chunk 的提取，无需手动设置。
2. runtimeChunk
runtimeChunk 可以将 webpack 的运行时代码（manifest）单独提取到一个 chunk 中，防止多个 chunk 重复引用。
module.exports = {
optimization: {
runtimeChunk: {
name: 'manifest'
}
}
}基于路由的按需加载
基于路由的按需加载可以帮助我们进一步优化包的加载，针对每个页面进行按需加载。
例如，我们可以针对路由进行如下配置：
-- -------------------- ---- -------
----- ------ - -
-
----- ----
---------- -- -- ----------------------
--
-
----- ---------
---------- -- -- -----------------------
--
-
----- -----------
---------- -- -- -------------------------
-
--在这个例子中，我们可以看到，每个路由都对应着一个动态导入的组件，只有访问了相应的路由才会加载对应的组件，避免了不必要的资源消耗。
总结
通过本文的介绍，我们了解了 webpack4 的动态导入使用及其打包优化。动态导入可以帮助我们实现按需加载，并且在 webpack4 中内置了支持。打包优化可以帮助我们提升应用的性能与用户体验，可以基于 SplitChunksPlugin 和 runtimeChunk 进行配置，同时也可以基于路由进行按需加载，每个页面只加载必要的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f18acdf6b2d6eab3b5c01a