如何将ArcGIS WebApp Builder代码嵌入Vue项目及内存泄漏问题求助

嘿，我之前踩过类似的坑，分享下我亲测有效的嵌入步骤和内存泄漏排查方案，希望能帮到你！

一、正确嵌入ArcGIS WebApp Builder到Vue项目的步骤 #

首先得明确：WebApp Builder是基于Dojo框架开发的，和Vue的模块系统、生命周期规则差异很大，直接把下载的代码扔到Vue的src目录下肯定会出问题，得换个姿势来：

1. 调整代码存放位置
   把从ArcGIS Online下载的WebApp Builder完整代码放到Vue项目的public目录下（比如public/webappbuilder），这样Vue的webpack不会去编译它，避免模块冲突。

2. 在入口HTML中引入依赖
   打开public/index.html，在<head>里添加ArcGIS API和Dojo的脚本引用，路径要对应你放的WebApp Builder位置：

<!-- 引入ArcGIS JS API -->
<script src="https://js.arcgis.com/4.25/"></script>
<!-- 引入WebApp Builder自带的Dojo -->
<script src="./webappbuilder/libs/dojo/dojo.js"></script>

注意：要保证ArcGIS API的版本和WebApp Builder依赖的版本一致，不然容易出现兼容性问题

3. 在Vue组件中初始化WebApp
   在需要嵌入地图的Vue组件里，先留一个挂载容器，然后在组件挂载完成后，用Dojo的require方法加载WebApp的入口模块并初始化：

<template>
  <!-- 给WebApp留一个挂载容器 -->
  <div ref="webappContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
export default {
  data() {
    return {
      webappInstance: null, // 存WebApp实例，方便后续销毁
      initWebappHandler: null // 存监听函数，方便后续移除
    }
  },
  mounted() {
    // 确保Dojo和ArcGIS API加载完成后再初始化
    const initWebapp = () => {
      window.dojo.require("myapp/main", (app) => {
        this.webappInstance = app;
        // 把WebApp挂载到我们的容器里
        app.init({
          domNode: this.$refs.webappContainer
        });
      });
    };

    if (window.dojo) {
      initWebapp();
    } else {
      // 如果还没加载完，等页面全部资源加载后再初始化
      window.addEventListener('load', initWebapp);
      this.initWebappHandler = initWebapp;
    }
  },
  beforeUnmount() {
    // 组件销毁时一定要清理WebApp实例，不然会内存泄漏！
    if (this.webappInstance && typeof this.webappInstance.destroy === 'function') {
      this.webappInstance.destroy();
    }
    if (this.initWebappHandler) {
      window.removeEventListener('load', this.initWebappHandler);
    }
  }
}
</script>

二、内存泄漏问题的排查与解决 #

你说启动就报内存泄漏，大概率是这几个原因：

1. WebApp代码被webpack编译导致模块冲突
   如果之前把WebApp代码放到了src目录，webpack会尝试编译Dojo的模块，这会导致重复加载、循环引用，直接触发内存泄漏。赶紧把代码移到public目录，再按上面的步骤来。

2. 组件销毁时未清理WebApp实例
   Dojo的实例不会自动跟随Vue组件的生命周期销毁，如果组件卸载了但WebApp还在运行，就会残留内存占用。一定要在beforeUnmount钩子中调用WebApp的destroy方法（不同版本的WebApp Builder方法名可能略有不同，你可以看一下下载代码里的文档）。

3. webpack打包时重复引入ArcGIS/Dojo模块
   可以在vue.config.js中配置externals，告诉webpack不要打包这些全局模块：

module.exports = {
  configureWebpack: {
    externals: {
      'dojo': 'dojo',
      'esri': 'esri'
    }
  }
}

这样能减少打包后的体积，也避免模块重复加载导致的内存问题。

4. 版本不兼容
   检查下你下载的WebApp Builder版本和ArcGIS JS API的版本是否匹配，版本不兼容也可能导致奇怪的内存占用问题。

如果还是有问题，可以打开浏览器的开发者工具（Memory面板）做个内存快照，看看哪些对象占用了大量内存，定位具体的泄漏点。

备注：内容来源于stack exchange，提问作者Mithunbabu Knceurcn