在前端开发中，我们经常使用 Webpack 进行项目的打包和优化。在这个过程中，我们可能会遇到一个问题，就是当我们使用动态加载（dynamic import）时，会出现重复加载同样的依赖库，导致浪费网络资源和影响网页加载速度的问题。为了解决这个问题，我们可以使用 Webpack 提供的一种方式，来提取动态 import() 的公共依赖，从而优化我们的项目。
什么是动态 import()
动态 import() 是 ES6 引入的一个特性，可以在运行时动态地加载模块。它通过返回一个 Promise 对象，表示在未来某个时刻会加载所需的模块。与静态 import 相比，动态 import() 具有延迟加载、按需加载的特点。因此，它常用于优化网页加载速度，提高用户体验。
为什么需要提取动态 import() 的公共依赖
当我们使用动态 import() 时，如果多个模块都依赖同样的库文件，那么这个库文件就会被重复加载。这不仅会浪费网络资源，还会影响网页加载速度。因此，为了优化项目的性能，我们需要提取这些公共依赖文件，将它们打包成一个单独的文件，供所有动态加载的模块使用。
如何提取动态 import() 的公共依赖
Webpack 提供了一个简单的方式来处理动态 import() 的公共依赖，就是使用 magic comment。当我们在动态 import() 函数的参数中使用 magic comment，Webpack 就会自动将这个依赖打包成一个单独的 chunk。比如下面这个例子：
import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
// 模块加载成功后执行的代码
}).catch(error => {
// 模块加载失败后执行的代码
})上面的代码中，我们使用了 magic comment webpackChunkName: "lodash" 来指定打包后的 chunk 的名称。Webpack 会把这个 chunk 中的所有模块都打包到一个单独的文件中，以供所有动态加载的模块共享。
如果有多个模块使用了相同的 magic comment，Webpack 会将它们的公共依赖打包到同一个 chunk 中。比如下面这个例子：
import(/* webpackChunkName: "common" */ 'jquery')
import(/* webpackChunkName: "common" */ 'lodash').then(_ => {
// 模块加载成功后执行的代码
}).catch(error => {
// 模块加载失败后执行的代码
})上面的例子中，我们使用了相同的 magic comment webpackChunkName: "common" 来指定这两个模块的公共依赖。Webpack 会将它们的公共依赖打包到一个名为 "common" 的 chunk 中。
示例代码
下面是一个更完整的示例代码，演示如何使用 magic comment 来提取动态 import() 的公共依赖：
-- -------------------- ---- ------- -- -------- ----------------------- -------- --- -- -- - ------------------ -------------- -- - -------------------- -- ----------------------- -------- --- -- -- - ------------------ -------------- -- - -------------------- -- -- ------ --------- ----------------- -------- -- --------- ------ ------- -------- ----- - ------ ----- - -- ------ --------- ----------------- -------- -- --------- ------ ------- -------- ----- - ------ ----- -
上面的示例代码中，我们在 foo.js 和 bar.js 中都使用了相同的 magic comment，来指定它们的公共依赖。当我们运行 index.js 时，Webpack 会将这两个模块的公共依赖打包到一个名为 "common" 的 chunk 中。最终打包的结果如下所示：
-- -------------------- ---- ------- -- -------- ------------------ -- - -- ----- ----------------- -------------------- -------------------- - ---- -------- -------------- -------- - ------ ----------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- --- ----- -- ----------- -------- --- -- -- - ------------------- -------------- -- - --------------------- --- ----- --- -- - -- ----- ----------------- -------------------- -------------------- - ---- -------- -------------- -------- - ------ ----------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- --- ----- -- ----------- -------- --- -- -- - ------------------- -------------- -- - --------------------- --- ----- -- ------------
可以看到，Webpack 将 jquery 和 lodash 打包到了一个名为 "vendors-node_modules_jquery_dist_jquery_js" 和 "vendors-node_modules_lodash_lodash_js" 的 chunk 中，然后将两个动态加载的模块 foo.js 和 bar.js 打包到了一个名为 "common" 的 chunk 中。当我们运行 index.js 时，会先加载 "vendors-node_modules_jquery_dist_jquery_js" 和 "vendors-node_modules_lodash_lodash_js"，然后加载 "common"，最后执行 index.js 中的代码。
总结
提取动态 import() 的公共依赖是 Webpack 中的一个重要优化技巧，可以减少网络资源的浪费，提高网页加载速度。它通过使用 magic comment 来指定公共依赖的打包规则，让我们轻松地优化我们的项目。希望这篇文章对你有所帮助，并能够在你的工作中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ea9b348841e9894e5d4fc