Azure App Service部署React(Vite)应用的配置问题

问题1：gzip压缩失效 #

已部署gzip压缩文件，但服务器始终返回未压缩文件。原配置核心问题是httpCompression节点位置错误（需嵌套在system.webServer内），且未覆盖足够多需要压缩的MIME类型。

问题2：Wasm文件Content-Type配置错误 #

Wasm文件响应类型为text/plain而非application/wasm，需确保MIME映射无冲突且配置生效。

修正后的Web.config配置 #

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <!-- 启用静态/动态压缩 -->
    <urlCompression doStaticCompression="true" doDynamicCompression="true" />
    
    <!-- 配置Wasm的MIME类型 -->
    <staticContent>
      <remove fileExtension=".wasm" />
      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
      <!-- 可选：添加Wasm长期缓存策略 -->
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
    </staticContent>

    <!-- 配置压缩规则 -->
    <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
      <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
      <dynamicTypes>
        <clear />
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="application/wasm" enabled="true" />
        <add mimeType="*/*" enabled="false" />
      </dynamicTypes>
      <staticTypes>
        <clear />
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="application/wasm" enabled="true" />
        <add mimeType="*/*" enabled="false" />
      </staticTypes>
      <!-- 关闭访问频率限制，确保静态压缩正常生效 -->
      <staticCompressionIgnoreHitFrequency="true" />
    </httpCompression>

    <!-- Vite React单页应用路由重写 -->
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

关键修正点说明 #

1. 压缩配置修正：

   • 把httpCompression移至system.webServer节点内，符合IIS配置规范
   • 新增application/json、application/wasm到压缩类型列表，覆盖更多静态资源
   • 启用staticCompressionIgnoreHitFrequency，避免因访问频率限制导致压缩不生效
   • 指定压缩临时文件目录，确保服务器有权限写入

2. Wasm类型修正：

   • 保留<remove fileExtension=".wasm" />避免默认MIME类型冲突
   • 明确映射.wasm到application/wasm
   • 可选添加缓存策略，优化Wasm文件加载性能

3. 新增路由重写：

   • 针对Vite React单页应用添加路由重写规则，确保页面刷新时路由正常工作

内容的提问来源于stack exchange，提问作者Gustavo Shigueo