webpack5构建JSON浮点数被误转为哈希触发JSON.parse语法错误

云上老周

2026-10-5

问题触发原因

核心是你使用的webpack 5.40.x内置的TerserWebpackPlugin携带的Terser压缩工具存在已知bug：在处理超过14位小数位的长浮点型字面量时，数字压缩优化逻辑出错，会错误生成带非法字母的数值，导致JSON结构损坏。
问题表现不稳定的原因：该bug触发和浮点数字符长度、chunk内容拆分逻辑、依赖安装的Terser小版本差异都有关，不同机器的依赖版本浮动、源文件内容变更都会改变chunk的压缩拆分逻辑，所以复现规律不确定。
你当前的构建方式是将geojson打包为JS chunk，压缩时Terser会将JSON内的数值识别为JS字面量进行优化，刚好触发了该问题。

修复方案

方案1：从根源规避压缩逻辑（推荐）

修改webpack配置，将geojson类文件通过asset/resource能力直接作为独立静态JSON文件输出，不走JS打包压缩链路，加载时直接fetch原始JSON即可：

// webpack.config.js 新增规则
module.exports = {
  module: {
    rules: [
      {
        test: /\.geojson$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/geojson/[name].[hash][ext]'
        }
      }
    ]
  }
}

方案2：关闭Terser的数字压缩优化

在TerserWebpackPlugin的配置中禁用出问题的数字压缩规则，无需修改资源加载逻辑：

// webpack.config.js 中Terser配置修改
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            // 禁用长浮点数压缩优化，避免非法数值生成
            num_fraction: false
          }
        }
      })
    ]
  }
}