[Flutter web]: How can we implement delayed imports in the context of index.html? With the Help of Callback Listeners and invoke from the app side

I was currently facing an issue during the initial loading time. I wanted to reduce it as much as possible. To achieve this, I implemented deferred loading and minimized the initial calls that I was using in the index.html file. I utilized callback listeners and invoked them from the Flutter web Dart calls when needed. This approach helped us reduce the loading time during the initial phase.

Call back listeners in index.html file

 <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> 

Invoke from the Dart file

import 'dart:js' as js; //Load js scripts functions Future loadGooglePlacesWithDelay() async { await js.context.callMethod('loadGoogleMapsApi'); }