webpack提取公共js

一、基础概念

Webpack是一个模块打包工具。在构建过程中，将多个模块（如JavaScript文件）按照一定的规则组合在一起。提取公共JS是指把多个入口文件或者模块中共同引用的JavaScript代码抽取出来，形成一个单独的文件。这样做的好处是可以减少代码冗余，提高缓存利用率，加快页面加载速度。

二、优势

1. 减少文件大小
   • 避免在每个页面或模块中重复包含相同的代码，从而减小最终打包文件的大小。

• 提高缓存命中率
  • 当公共JS被单独提取出来后，只要公共JS没有改变，在不同的页面加载时浏览器可以直接从缓存中读取，而不需要重新下载。

三、类型（从提取方式角度）

1. 按需提取
   • 根据入口点的依赖关系，精确地提取每个入口点共享的代码。例如，在多页面应用中，不同页面可能有部分相同的第三方库或者工具函数，按需提取可以确保这些公共部分被单独打包。

• 整体提取
  • 将所有模块中可能共享的代码统一提取到一个公共文件中。这种方式相对简单，但可能会导致公共文件包含一些不必要的代码。

四、应用场景

1. 多页面应用
   • 在一个包含多个HTML页面且每个页面都有自己独立的JavaScript入口文件的应用中，不同页面可能会引用相同的库（如jQuery）或者通用的工具函数。通过提取公共JS，可以优化整个应用的加载性能。

• 大型单页面应用
  • 当应用规模较大，模块众多时，不同功能模块之间可能存在共享代码，提取公共JS有助于提高构建效率和运行时的性能。

五、可能出现的问题及解决方法

1. 公共JS文件过大
   • 原因：可能是因为提取规则过于宽泛，导致一些不必要的代码被包含进来。
   • 解决方法：仔细调整Webpack的配置中的splitChunks参数。例如，可以设置最小共享大小（minSize），只有当模块被引用的次数超过一定阈值（minChunks）且模块大小达到最小共享大小时才被提取到公共JS中。
   • 示例代码（在Webpack配置文件中的optimization.splitChunks部分）：
   • 示例代码（在Webpack配置文件中的optimization.splitChunks部分）：

• 缓存失效问题
  • 原因：如果公共JS文件频繁改变，即使只是其中一小部分代码改变，整个公共JS文件都会重新构建并导致缓存失效。
  • 解决方法：可以使用内容哈希（contenthash）。Webpack会根据文件内容生成唯一的哈希值，当文件内容改变时，哈希值也会改变。
  • 示例代码（在输出配置部分）：
  • 示例代码（在输出配置部分）：