vue
vue copied to clipboard
Module Federation & Vue 2 SSR: support async initialization
What problem does this feature solve?
In order for Module Federation to work correctly, it requires a bootstrap entry file that serves as an asynchronous boundary between the host and the remote code. This way It will split out the initialization code of a larger chunk to avoid any additional round trips and improve performance in general. (Read more in: the issue in module-federation, webpack documentation and a blog post).
When we try this concept in Vue 2 (latest version, 2.6.14), during SSR, vue-server-renderer will complain as it expects the module export to be a function, regardless of whether it will run it in a new context or not (runInNewContext
).
See below commit (over the vue-hackernews example project) where the issue is minimally reproduced: The server entry will simply export the function creating the app instance through an import, instead of exporting it directly: https://github.com/tameraydin/vue-hackernews-2.0/commit/074192d9da26f8d78c742acb4328468edb19806c
What does the proposed API look like?
There would be no need to introduce any new API or a breaking change. We would like vue-server-renderer to support also such async initializations; in other words, to accept also Promise
(e.g. import
) type of exports which would then resolve to a function that it currently expects, so that the Module Federation & SSR can be fully achieved in Vue 2.
We have solved this in our local fork (through a small refactoring over createBundleRunner) with proper testing and are happy to open a pull-request - but of course, we would like get your feedback first.
PS. I created a draft PR in case it provides a better context.