Flutter Web：如何借助回调监听器实现index.html延迟导入？

我之前碰到Flutter Web初始加载耗时太长的问题，为了尽可能缩短加载时间，我采用了延迟加载方案：减少index.html中的初始脚本调用，转而在页面中定义回调监听器，等到实际需要时再从Dart代码里触发调用。这个方法有效缩短了初始加载阶段的耗时。

index.html中的回调监听器 #

<script>
  function loadStripeScript() {
    const script = document.createElement('script');
    script.src = 'https://js.stripe.com/v3/';
    script.defer = true;
    document.head.appendChild(script);
  }
  function loadGoogleMapsApi() {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR KEY';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
  }
</script>

Dart文件中的调用代码 #

import 'dart:js' as js;

// 加载JS脚本的函数
Future loadGooglePlacesWithDelay() async {
    await js.context.callMethod('loadGoogleMapsApi');
}

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