导入@arcgis/core的Point和ElevationLayer导致React构建包体积翻倍如何解决

问题根因 #

@arcgis/core 是全量GIS功能库，4.21.2版本对tree shaking的支持度有限，即使仅导入两个子模块，也会默认引入大量依赖的核心基础模块，构建时无法自动剔除冗余代码，最终导致包体积暴涨。

解决方案 #

最优方案：直接调用高程REST接口（零SDK引入） #

你的需求仅为查询经纬度对应海拔，完全不需要引入ArcGIS SDK组件，直接调用ArcGIS公开的高程服务REST接口即可，不会增加任何额外包体积。示例代码如下：

// 查询WGS84坐标系下单个坐标的海拔值
async function getElevation(lon, lat) {
  const url = "https://elevation.arcgis.com/arcgis/rest/services/WorldElevation/Terrain/ImageServer/identify";
  const params = new URLSearchParams({
    f: "json",
    geometry: JSON.stringify({
      x: lon,
      y: lat,
      spatialReference: { wkid: 4326 }
    }),
    geometryType: "esriGeometryPoint",
    returnGeometry: "false"
  });
  const res = await fetch(`${url}?${params}`);
  const data = await res.json();
  // 海拔值单位为米，无数据时返回null
  return data?.value ?? null;
}

该方案可以完全避免引入@arcgis/core相关代码，包体积回到原有10MB水平。

方案二：配置构建工具优化SDK按需打包 #

如果确实需要使用SDK原生功能，可以通过插件配置优化构建体积：

1. 安装对应版本的webpack适配插件：

npm install @arcgis/webpack-plugin@4.21.x --save-dev

2. 如果你使用Create React App，通过craco或者eject修改webpack配置，添加插件：

const ArcGISPlugin = require('@arcgis/webpack-plugin');

module.exports = {
  // 其他原有配置
  plugins: [
    new ArcGISPlugin({
      locales: ['zh-cn'],
      features: {
        "3d": false, // 不需要3D功能直接关闭
        "network": true
      }
    })
  ]
}

配置后构建会自动剔除未使用的SDK模块，整体体积可降低60%以上。

方案三：动态导入拆分Chunk #

如果高程查询不需要在首屏加载，可以把相关逻辑做异步拆分，不会打入主包：

const queryElevation = async (lon, lat) => {
  // 触发查询时才加载SDK模块
  const [Point, ElevationLayer] = await Promise.all([
    import('@arcgis/core/geometry/Point'),
    import('@arcgis/core/layers/ElevationLayer')
  ]);
  // 后续高程查询逻辑
}

该方案主包体积不会增加，只有用户触发高程查询时才会加载对应的SDK资源。

内容的提问来源于stack exchange，提问作者c-mcb92