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