ExtJS+Grails生产构建缺失bootstrap.js/microloader.js白屏问题

你的三点猜测基本符合实际情况，核心差异来自ExtJS Sencha Cmd的构建默认配置，以及开发/生产环境的微加载器区别：

• bootstrap.js是仅开发环境生成的微加载器，负责开发模式下的动态依赖加载、源码路径映射，生产构建过程不会输出该文件，你最初新应用生产环境gsp中引用bootstrap.js必然触发404白屏。
• microloader.js是生产环境专用微加载器，负责加载压缩打包后的业务代码、静态资源、处理缓存清单，和bootstrap.js环境对应、功能定位相似，但不是单纯的命名差异。
• ExtJS 7.5.1版本默认对modern toolkit的生产构建开启微加载器内嵌：会把microloader的全部逻辑直接写入构建生成的index.html中，不会输出独立的microloader.js文件；而classic toolkit默认配置是输出独立的microloader.js文件，这就是你看到新旧应用构建产物差异的核心原因。
• 由于项目使用Grails的index.gsp作为实际入口，构建生成的index.html不会被加载，内嵌在其中的microloader逻辑自然不会生效，这也是你修改gsp引用microloader.js后报文件不存在的原因。
• 额外注意你新应用gsp里的base href配置末尾缺少斜杠，会导致相对路径解析异常，和旧应用对齐时要补上末尾的/。

二选一即可，推荐优先选方案1，和现有旧应用的行为保持一致，降低维护成本。

方案1：修改构建配置生成独立microloader.js #

找到新ExtJS应用根目录下的app.json配置文件，定位到production环境专属配置块，调整microloader的嵌入开关：

1. 默认modern生产环境的microloader配置如下：

"production": {
  "microloader": {
    "embed": true,
    "manifest": {
      "embed": true
    }
  }
  // 其余生产环境配置保持不变
}

2. 将两个embed字段的值改为false，修改后配置为：

"production": {
  "microloader": {
    "embed": false,
    "manifest": {
      "embed": false
    }
  }
  // 其余生产环境配置保持不变
}

3. 清空之前的构建产物缓存，重新执行生产构建命令（通常为sencha app build production），构建完成后检查生产输出目录，会生成独立的microloader.js文件，此时gsp中引用microloader.js的配置即可正常运行，和现有旧应用逻辑完全对齐。

方案2：复用内嵌的微加载器逻辑 #

如果你不想修改构建配置，可以直接打开新应用生产构建生成的index.html，把其中内嵌的microloader脚本、缓存清单相关配置完整复制到index.gsp的生产环境判断块中，删掉原来引用bootstrap.js/microloader.js的script标签即可。这种方式减少一次外部JS请求，是modern toolkit默认的优化策略，只要复制时注意路径匹配即可正常运行。

1. 每次修改配置后先清空旧的构建产物、Grails临时缓存、浏览器静态资源缓存，避免旧文件干扰
2. 构建完成后先核对输出目录的文件和gsp中引用的资源是否一一对应
3. 若仍出现路径类错误，优先检查base href的配置、Grails静态资源映射规则是否和ExtJS构建输出的目录结构匹配

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