jantimon/html-webpack-plugin

Module Federation: injecting scripts for remotes with HtmlWebpackPlugin

serrg opened this issue · 4 comments

serrg commented

Current behaviour 💣

During runtime when request to remote application is pending, injected script is blocking the page.

Expected behaviour ☀️

  1. When inject: body is set with HtmlWebpackPlugin put loading script at the end of the body tag.
  2. Do not block page/application when remote entry is not responding.

Reproduction Example 👾

In the scenario we have host and remote applications:

  • host application shell (localhost:3000)
  • remote app (localhost:3002) which is not responding, we simulate request pending by setting the timeout

shell webpack configuration:

new ModuleFederationPlugin({
  name: "shell",
  filename: "remoteEntry.js",
  remotes: {
    app: 'app@http://localhost:3002/remoteEntry.js',
  }
})
new HtmlWebpackPlugin({
    template: "./public/index.html",
    inject: "body",
})

Source code of app:

const express = require("express");
const app = express();
const port = 3002;
app.use((req, res, next) => setTimeout(next, 30000));
app.get("*", (req, res) => { res.send("Hello World!"); });
app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); });

Screenshot 2021-08-04 at 13 52 19

As you can see script connecting for the remote entry is located in head tag.

We can use promise based loaders for remotes, pass a promise to this remote and inject into body tag:

market: `promise new Promise(resolve => {
  const remoteUrl = 'http://localhost:3002/remoteEntry.js'
  const script = document.createElement('script')
  script.async = true;
  script.defer = true;
  script.src = remoteUrl
  document.body.appendChild(script);
})
`

and at runtime script is located at the end body but the page is still blocked by loading remote entry.

Screenshot 2021-08-04 at 14 13 31

Alternatively we can dynamically load remotes during runtime using this

Environment 🖥

Node.js v14.17.1
darwin 20.6.0
npm 6.14.13
webpack 5.38.1
html-webpack-plugin 5.3.1

jantimon commented

What is the content of public/index.html ?

serrg commented

What is the content of public/index.html ?

<html>
  <head>
    <title>Shell</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
jantimon commented

Okay that's strange I have no idea what is injecting the blocking script..

All scripts injected by html-webpack-plugin are using the defer property to allow async loading

stale commented

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.