Vue Microfrontend Lazy Loading Component

Question

Hi I'm creating a new microfrontend app, with different micrfrontends. The hosting one have to load all the other mfes, but i need to load them after the login with the access token generated. I'm using webpack with vue-3 and modulefederation plugin. At the moment the mfes are loading by a new Promise inside the modulefederation,

 new ModuleFederationPlugin({
      name: 'my-app',
      filename: 'remoteEntry.js',
      remotes: {
        first_mfe: `promise new Promise(getUrl('first_mfe'))`,
        second_mfe: `promise new Promise(getUrl('second_mfe'))`,
      },
      shared: [require('./package.json').dependencies],
    }),

const getUrl = (resolve) => {
  const script = document.createElement('script');
  script.src = parsedUrl || 'http://localhost:8000/remoteEntry.js'; // notEmpty request
  script.type = 'text/javascript';
  script.onload = () => {
    const module = {
      get: (request) => parsedUrl.get(request),
      init: (arg) => {
        try {
          return parsedUrl.init(arg);
        } catch (e) {
          console.log('Auth has already been loaded');
        }
      },
    };

    resolve(module);
  };
  document.head.appendChild(script);
};

The result is that when i load the paths inside router or import a mfe component inside the host one, it requires the remoteEntries before the login page starts, There's a solution to fix this?

Vue Microfrontend Lazy Loading Component

0 Answers0