在前端开发中，我们经常会使用 WebPack 进行代码打包和模块化管理。在项目中，我们可能会引用一些公共模块，如 jQuery、React 等，这些模块在多个页面中都会被用到。如果每个页面都单独打包这些公共模块，会导致重复打包，浪费资源，增加加载时间，降低用户体验。因此，如何处理公共模块的引用是一个很重要的问题。
什么是公共模块？
公共模块是指在多个页面中都会被用到的模块，如 jQuery、React 等。
如何处理公共模块的引用？
方式一：使用 WebPack 的 splitChunks 配置
在 WebPack4 中，可以使用 splitChunks 配置来处理公共模块的引用。这个配置可以将公共模块打包到一个单独的文件中，避免重复打包。
-- -----------------
-------------- - -
-----
------------- -
------------ -
------------ -
-------- -
----- ----------
------- ----------
---------- -
-
-
-
-
--上面的配置中，cacheGroups 是一个缓存组，可以将多个模块打包到一个文件中。我们可以将公共模块打包到一个名为 commons 的文件中。
方式二：使用 externals 配置
另一种处理公共模块的方式是使用 externals 配置。这个配置可以将公共模块从打包文件中剔除，避免重复打包。
-- -----------------
-------------- - -
-----
---------- -
------- ---------
------ -------
-
--上面的配置中，我们将 jQuery 和 React 从打包文件中剔除，然后在页面中使用 script 标签引入这些模块。
总结
在前端开发中，处理公共模块的引用是一个很重要的问题。我们可以使用 WebPack 的 splitChunks 配置或 externals 配置来处理公共模块的引用。这些配置可以避免重复打包，减少资源浪费，提高用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65719fb7d2f5e1655da5132e