modulepreload the scripts needed for faster page load (#4507)

https://github.com/zauberzeug/nicegui/discussions/4505#discussioncomment-12562699

Before: 

![image](https://github.com/user-attachments/assets/99433484-5800-4716-8995-ff7f22c15276)

After: 

![image](https://github.com/user-attachments/assets/e4d444ca-4c07-40cb-8629-0be954e0ebe8)


It's slightly better. _It ain't much but it's honest work._ 

When does this matter? 
* Initial page load
* Loading new and unused elements like `ui.input()`

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>

nicegui/client.py

@@ -136,7 +136,8 @@ class Client:
             'client_id': self.id,
             'next_message_id': self.outbox.next_message_id,
         }
-        vue_html, vue_styles, vue_scripts, imports, js_imports = generate_resources(prefix, self.elements.values())
+        vue_html, vue_styles, vue_scripts, imports, js_imports, js_imports_urls = \
+            generate_resources(prefix, self.elements.values())
         return templates.TemplateResponse(
             request=request,
             name='index.html',
@@ -153,6 +154,7 @@ class Client:
                 'vue_scripts': '\n'.join(vue_scripts),
                 'imports': json.dumps(imports),
                 'js_imports': '\n'.join(js_imports),
+                'js_imports_urls': js_imports_urls,
                 'quasar_config': json.dumps(core.app.config.quasar_config),
                 'title': self.resolve_title(),
                 'viewport': self.page.resolve_viewport(),

nicegui/dependencies.py

@@ -130,6 +130,7 @@ def generate_resources(prefix: str, elements: Iterable[Element]) -> Tuple[List[s
                                                                           List[str],
                                                                           List[str],
                                                                           Dict[str, str],
+                                                                          List[str],
                                                                           List[str]]:
     """Generate the resources required by the elements to be sent to the client."""
     done_libraries: Set[str] = set()
@@ -137,8 +138,9 @@ def generate_resources(prefix: str, elements: Iterable[Element]) -> Tuple[List[s
     vue_scripts: List[str] = []
     vue_html: List[str] = []
     vue_styles: List[str] = []
-    js_imports: List[str] = []
     imports: Dict[str, str] = {}
+    js_imports: List[str] = []
+    js_imports_urls: List[str] = []
 
     # build the importmap structure for exposed libraries
     for key, library in libraries.items():
@@ -162,6 +164,7 @@ def generate_resources(prefix: str, elements: Iterable[Element]) -> Tuple[List[s
                 if not library.expose:
                     url = f'{prefix}/_nicegui/{__version__}/libraries/{library.key}'
                     js_imports.append(f'import "{url}";')
+                    js_imports_urls.append(url)
                 done_libraries.add(library.key)
         if element.component:
             js_component = element.component
@@ -169,5 +172,6 @@ def generate_resources(prefix: str, elements: Iterable[Element]) -> Tuple[List[s
                 url = f'{prefix}/_nicegui/{__version__}/components/{js_component.key}'
                 js_imports.append(f'import {{ default as {js_component.name} }} from "{url}";')
                 js_imports.append(f'app.component("{js_component.tag}", {js_component.name});')
+                js_imports_urls.append(url)
                 done_components.add(js_component.key)
-    return vue_html, vue_styles, vue_scripts, imports, js_imports
+    return vue_html, vue_styles, vue_scripts, imports, js_imports, js_imports_urls

nicegui/templates/index.html

@@ -13,6 +13,12 @@
     {% endif %}
     <!-- prevent Prettier from removing this line -->
     {{ head_html | safe }}
+    <script type="importmap">
+      {"imports": {{ imports | safe }}}
+    </script>
+    {% for url in js_imports_urls %}
+    <link rel="modulepreload" href="{{ url }}" />
+    {% endfor %}
   </head>
   <body>
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/es-module-shims.js"></script>
@@ -31,9 +37,6 @@
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/nicegui.js"></script>
 
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/lang/{{ language }}.umd.prod.js"></script>
-    <script type="importmap">
-      {"imports": {{ imports | safe }}}
-    </script>
     {{ body_html | safe }}
 
     <div id="app"></div>