SAPUI5应用ZXing库首次打开不加载、刷新后正常问题排查

这是典型的异步资源加载时序错配问题，触发逻辑和无痕模式的缓存特性直接相关：

• manifest.json里配置的第三方JS资源，UI5默认采用异步模式加载，不会阻塞应用本身的初始化流程
• 无痕模式首次访问时，浏览器不会读取本地磁盘缓存，所有资源都走网络请求，zxing.min.js本身体积不小，网络耗时更长。此时控制器init生命周期、自定义控件的解析执行时机，早于ZXing库加载完成、挂载window.ZXing全局变量的时机，直接抛出Can't find variable: ZXing错误
• 手动刷新页面后，无痕会话会临时缓存当前会话加载过的资源，ZXing库加载速度大幅提升，能赶在业务代码调用前完成全局变量挂载，功能就恢复正常
• 代码头部的/* global ZXing:true */只是给ESLint等静态校验工具用的声明，不会干预实际资源加载顺序，对解决这个问题没有作用

可根据项目实际需求二选一：

方案1：强制ZXing同步加载（改造成本最低） #

修改manifest.json的资源配置，给ZXing引入项增加async: false参数，强制UI5在核心启动阶段同步加载完该库，再执行后续应用初始化逻辑，从流程上保证调用ZXing时库已经加载完成：

"resources": {
  "css": [
    {
      "uri": "css/style.css"
    }
  ],
  "js": [
    {
      "uri": "libs/zxing.min.js",
      "async": false
    }
  ]
}

该方案改动量极小，适合快速修复问题，缺点是同步加载第三方库会略微增加首屏加载等待时间。

方案2：按需异步加载（符合UI5开发规范） #

保留异步加载特性避免阻塞首屏，在实际用到扫描器的位置先校验ZXing加载状态，未加载时动态拉取库，等加载完成回调触发后再初始化扫描器实例。
以Master.controller.js的改造为例：

onInit: function() {
  // 校验ZXing是否已挂载到全局
  if (!window.ZXing) {
    // 替换路径为你项目实际的ZXing库路径
    sap.ui.require(["your/project/namespace/libs/zxing.min.js"], () => {
      this._createScannerInstance();
    });
  } else {
    this._createScannerInstance();
  }
},

// 抽离扫描器初始化逻辑
_createScannerInstance: function() {
  this.oScanner = new BarcodeScanner({
    valueScanned: [this.onScanned, this],
    decoderKey: 'text',
  });
}

如果项目做了模块加载器的shim配置，也可以直接把ZXing注册为标准AMD模块，在BarcodeScanner自定义控件的依赖列表中显式声明ZXing依赖，从模块加载机制层面彻底规避时序问题。

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