部署在IIS10上的Vue.js项目出现net::ERR_HTTP2_PROTOCOL_ERROR问题排查咨询

Hey there, let's break down this problem step by step—I’ve run into nearly identical HTTP2 protocol errors linked to Webpack chunk splitting before, so I’ve got some solid leads for you.

核心问题梳理 #

你在启用Webpack的splitChunks进行激进代码拆分后，仅在**强制刷新（Ctrl+F5）**时出现net::ERR_HTTP2_PROTOCOL_ERROR，普通刷新却能正常加载网站。这个问题是在你拆分大体积vendor.js以优化加载速度后才频繁出现的，显然和chunk拆分策略直接相关。

最可能的根因 #

结合HTTP2协议特性和Webpack拆分逻辑，这个错误基本逃不开以下三个原因：

1. HTTP2并发流限制：大多数服务器（Nginx、Apache等）默认对单连接的HTTP2并发流数有上限（通常是100）。强制刷新会跳过浏览器缓存，一次性发送所有拆分后的chunk请求，如果请求数超过服务器限制，就会触发协议层错误。
2. 过于激进的chunk拆分：你设置的maxSize: 400000（400KB）会把vendor代码拆分成大量小chunk，就算HTTP2支持多路复用，过多的并发请求也会在强制刷新时 overwhelm 服务器的连接处理能力。
3. 缓存头配置不匹配：强制刷新会向服务器发送no-cache请求头，如果服务器对带哈希的拆分chunk没有正确配置缓存策略，可能会触发底层HTTP2协议的处理失败。

分步排查与解决方案 #

我们从最容易落地的方案开始：

1. 调整splitChunks配置，减少chunk数量

先放宽拆分限制，降低总请求数：

optimization: { 
  splitChunks: { 
    chunks: "all", 
    minSize: 100000, // 提高最小chunk体积到100KB，避免生成无意义的微小chunk
    maxSize: 1000000, // 增大最大chunk体积到1MB，减少总chunk数量
    cacheGroups: {
      // 显式定义vendor缓存组，避免无规则的随机拆分
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        name: "vendors"
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
}

这个配置既能保证拆分优化加载速度，又不会生成过多chunk触发HTTP2限制。

2. 检查服务器的HTTP2配置

如果调整Webpack后问题仍存在，需要修改服务器的并发流限制：

• Nginx：找到http2_max_concurrent_streams指令，默认值通常是100，尝试调整到200或300。
• Apache：修改HTTP2MaxStreams配置，默认也是100，适当调高数值。
• CDN服务：如果用了CDN，去控制台查看HTTP2并发流限制的配置选项，按需调整。

3. 验证静态资源的缓存头设置

确保服务器为带哈希的chunk文件发送正确的缓存头：

• 设置Cache-Control: public, max-age=31536000, immutable，让浏览器长期缓存这些哈希命名的chunk（哈希变化才会重新请求）。
• 确保服务器不会拒绝no-cache请求（强制刷新时的请求），部分配置错误的缓存代理会拦截这类请求，导致协议错误。

4. 可视化分析bundle结构

用webpack-bundle-analyzer查看拆分后的chunk详情，找出可以合并的冗余小chunk：

npm install webpack-bundle-analyzer --save-dev

把它添加到Webpack配置中，执行构建后就能直观看到每个chunk的内容，针对性地合并不必要的拆分。

额外测试：跨浏览器验证 #

偶尔这个错误是浏览器特定的HTTP2实现问题，分别用Chrome、Firefox、Edge测试，如果只在某一款浏览器出现，可能需要针对性调整浏览器的网络设置（不过这种情况比较少见）。

内容的提问来源于stack exchange，提问作者Santosh Jha