Azure静态Web App免费层gz/json文件加载响应缓慢问题排查

我当前使用Azure静态Web App免费层，需从index.html加载gz和json文件，但通过浏览器控制台的网络面板发现文件响应耗时极长。本地测试时加载正常，已排除文件路径问题，疑惑是否需要对staticwebapp.config.json进行配置调整。

调用gz文件的Ajax代码 #

// Fetch the compressed GeoJSON data from new_data.gz
$.ajax({
    // url: '/special-reports/ground-truths/map/new_data.gz',
    url: 'new_data.gz',
    method: 'GET',
    headers: { 'Content-Encoding': 'gzip' },
    xhrFields: {
        responseType: 'arraybuffer' // Set response type to handle binary data
    },
    success: function (compressedData) {
        try {
            // Log the raw data received for debugging
            console.log("Compressed data received:", compressedData);

            // Decompress the data using pako.ungzip
            var decompressedData = pako.ungzip(new Uint8Array(compressedData), { to: 'string' });

            // Parse the decompressed data as JSON
            var geojson = JSON.parse(decompressedData);
            console.log("GeoJSON data loaded successfully.");

            // Process the GeoJSON data
            processGeojsonData(geojson);
        } catch (error) {
            // Log error details if decompression or parsing fails
            console.error("An error occurred while processing the GeoJSON data:", error);
        }
    }
});

文件目录结构 #

index_test.html与new_data.gz、目标json文件处于同一目录/special-reports/ground-truths/map下。

当前staticwebapp.config.json配置 #

{
  "routes": [
    {
        "route": "/special-reports/ground-truths/map",
        "serve": "/special-reports/ground-truths/map/index_test.html",
        "statusCode": 200
    }
],
  "mimeTypes": {
        ".json": "text/json",
        ".gz": "text/gzip"
  }
}

加载情况 #

gz文件和json文件均出现响应耗时极长的问题。

问题排查与解决建议 #

1. 修正MIME类型配置 #

当前mimeTypes配置存在错误：

• .gz文件的标准MIME类型是application/gzip，而非text/gzip。text类型会让浏览器尝试将二进制压缩文件按文本解析，导致传输或处理异常，增加耗时。
• .json文件的标准MIME类型是application/json，text/json虽兼容但推荐使用标准类型。

修正后的mimeTypes部分：

"mimeTypes": {
    ".json": "application/json",
    ".gz": "application/gzip"
}

2. 移除错误的请求头 #

Ajax请求中设置的headers: { 'Content-Encoding': 'gzip' }是错误的：Content-Encoding是响应头，用于服务器告知客户端返回内容的压缩格式，客户端无需在请求中设置该头。错误的请求头可能导致服务器处理逻辑异常，延长响应时间。

修改后的Ajax代码（移除该请求头）：

// Fetch the compressed GeoJSON data from new_data.gz
$.ajax({
    url: 'new_data.gz',
    method: 'GET',
    xhrFields: {
        responseType: 'arraybuffer' // Set response type to handle binary data
    },
    success: function (compressedData) {
        try {
            // Log the raw data received for debugging
            console.log("Compressed data received:", compressedData);

            // Decompress the data using pako.ungzip
            var decompressedData = pako.ungzip(new Uint8Array(compressedData), { to: 'string' });

            // Parse the decompressed data as JSON
            var geojson = JSON.parse(decompressedData);
            console.log("GeoJSON data loaded successfully.");

            // Process the GeoJSON data
            processGeojsonData(geojson);
        } catch (error) {
            // Log error details if decompression or parsing fails
            console.error("An error occurred while processing the GeoJSON data:", error);
        }
    }
});

3. 确保静态资源路由不被拦截 #

当前路由规则将/special-reports/ground-truths/map指向index_test.html，但需确保静态文件（.gz、.json）的请求不会被路由规则意外拦截。可以添加明确的静态资源路由规则：

"routes": [
    {
        "route": "/special-reports/ground-truths/map",
        "serve": "/special-reports/ground-truths/map/index_test.html",
        "statusCode": 200
    },
    {
        "route": "/special-reports/ground-truths/map/*.gz",
        "serve": "/special-reports/ground-truths/map/{file}",
        "statusCode": 200
    },
    {
        "route": "/special-reports/ground-truths/map/*.json",
        "serve": "/special-reports/ground-truths/map/{file}",
        "statusCode": 200
    }
]

4. 其他排查方向 #

• 确认Azure静态Web App的部署包中文件完整，大小与本地一致，避免文件损坏。
• Azure静态Web App免费层存在带宽和性能限制，若文件体积较大，可考虑升级层或优化文件大小（如进一步压缩GeoJSON）。

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