优化arcgis for js使用ESModules方式打包慢

描述

vite+vue3 使用npm的ES Modules构建arcgis for js，使用的@arcgis/core模块越多，打包时构建时间越长

例如我现在的项目用到了这些包：

import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
import TileLayer from '@arcgis/core/layers/TileLayer'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import CSVLayer from '@arcgis/core/layers/CSVLayer'
import Legend from '@arcgis/core/widgets/Legend'
import Zoom from '@arcgis/core/widgets/Zoom'
import ScaleBar from '@arcgis/core/widgets/ScaleBar'
import HeatmapRenderer from '@arcgis/core/renderers/HeatmapRenderer'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import SceneView from '@arcgis/core/views/SceneView'
import esriId from '@arcgis/core/identity/IdentityManager'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import Graphic from '@arcgis/core/Graphic'
import Draw from '@arcgis/core/views/draw/Draw'
import Point from '@arcgis/core/geometry/Point'
import SpatialReference from '@arcgis/core/geometry/SpatialReference'
import Basemap from '@arcgis/core/Basemap'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
import Swipe from '@arcgis/core/widgets/Swipe'
import LineOfSight from '@arcgis/core/widgets/LineOfSight'
import FeatureSet from '@arcgis/core/rest/support/FeatureSet'
import LinearUnit from '@arcgis/core/rest/support/LinearUnit'
import * as geoprocessor from '@arcgis/core/rest/geoprocessor'

将所有业务代码全部抽离的情况下使用build打包构建了49秒。

优化方式

一、通过ESModules结合CDN的方式导入模块

import MapImageLayer from 'https://js.arcgis.com/4.26/@arcgis/core/layers/MapImageLayer.js'
import TileLayer from 'https://js.arcgis.com/4.26/@arcgis/core/layers/TileLayer.js'
import FeatureLayer from 'https://js.arcgis.com/4.26/@arcgis/core/layers/FeatureLayer.js'
import CSVLayer from 'https://js.arcgis.com/4.26/@arcgis/core/layers/CSVLayer.js'
import Legend from 'https://js.arcgis.com/4.26/@arcgis/core/widgets/Legend.js'
import Zoom from 'https://js.arcgis.com/4.26/@arcgis/core/widgets/Zoom.js'
import ScaleBar from 'https://js.arcgis.com/4.26/@arcgis/core/widgets/ScaleBar.js'
import HeatmapRenderer from 'https://js.arcgis.com/4.26/@arcgis/core/renderers/HeatmapRenderer.js'
import Map from 'https://js.arcgis.com/4.26/@arcgis/core/Map.js'
import MapView from 'https://js.arcgis.com/4.26/@arcgis/core/views/MapView.js'
import SceneView from 'https://js.arcgis.com/4.26/@arcgis/core/views/SceneView.js'
import esriId from 'https://js.arcgis.com/4.26/@arcgis/core/identity/IdentityManager.js'
import GraphicsLayer from 'https://js.arcgis.com/4.26/@arcgis/core/layers/GraphicsLayer.js'
import Draw from 'https://js.arcgis.com/4.26/@arcgis/core/views/draw/Draw.js'
import Point from 'https://js.arcgis.com/4.26/@arcgis/core/geometry/Point.js'
import SpatialReference from 'https://js.arcgis.com/4.26/@arcgis/core/geometry/SpatialReference.js'
import Basemap from 'https://js.arcgis.com/4.26/@arcgis/core/Basemap.js'
import WebTileLayer from 'https://js.arcgis.com/4.26/@arcgis/core/layers/WebTileLayer.js'
import Swipe from 'https://js.arcgis.com/4.26/@arcgis/core/widgets/Swipe.js'
import LineOfSight from 'https://js.arcgis.com/4.26/@arcgis/core/widgets/LineOfSight.js'
import Graphic from 'https://js.arcgis.com/4.26/@arcgis/core/Graphic.js'
import FeatureSet from 'https://js.arcgis.com/4.26/@arcgis/core/rest/support/FeatureSet.js'
import LinearUnit from 'https://js.arcgis.com/4.26/@arcgis/core/rest/support/LinearUnit.js'
import * as geoprocessor from 'https://js.arcgis.com/4.26/@arcgis/core/rest/geoprocessor.js'

由于可用的@arcgis/core CDN很少，官方CDN在国外不稳定。

所以我们从官网下载 ，上传到服务器。 （该包里面小文件很多，建议将压缩包上传后再解压）

官方建议此方式仅用于开发和原型制作。并未针对性能做优化，不建议用于生产环境。

当然，项目不是很大的话也可以不接受它的建议。

我将实际项目进行改造测试，运行过程中并未发现性能问题。只是 esriConfig.assetsPath 配置会出现一点小问题

二、开发用vite构建，打包用webpack

结合使用需要处理很多配置问题。有兴趣的话可以试一下

实际，我创建了两个简单的demo加载部分@arcgis/core组件， webpack和vite使用构建时长差别不大,，可能是我的配置有问题吧

三、打包方式esbuild优于terser

vite：

在本地测试时 esbuild 打包时长快terser 20%左右

通过服务器配置的jenkins自动部署，terser需要7分钟，esbuild需要1分30秒， （这也跟服务器配置低有关系）

总结

当前并没有太好的能解决@arcgis/core打包慢的问题。网上也没找到，如果各位有什么好的方案请务必告诉我，谢谢！