Application with multiple iframes performances problems on hot reload

[paztis]

• Operating System: MacOS BigSur
• Node Version: 14.15
• NPM Version: 6.14.8
• webpack Version: 4.44.2
• webpack-dev-server Version: 3.11.1
• Browser: chrome 88.0.4324.87

• This is a bug
• This is a modification request

Code

// webpack.config.js
{
    output: {
        library: 'viewDesignerApp',
        path: 'dist',
        publicPath: '/my-app/',
        libraryTarget: 'umd'
    },
    entry: {
        'index': 'src/index',
        'index-frame1': 'src/index-frame1',
        'index-frame2': 'src/index-frame2'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            filename: 'index-frame1.html',
            chunks: ['index-frame1']
        }),
        new HtmlWebpackPlugin({
            filename: 'index-frame2.html',
            chunks: ['index-frame2']
        }),
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    devServer: {
        contentBase: ['dist'],
        contentBasePublicPath: '/my-app/',
        compress: true,
        publicPath: '/my-app/',
        port: 3001
    }
}

src/index.js

import {render} from 'react-dom';

const rootNode = document.getElementById('root');
render(
    <div>
        <iframe src="./index-frame1.html" />
        <iframe src="./index-frame2.html" />
    </div>,
    rootNode
);

src/index-frame1.js

import {render} from 'react-dom';

const rootNode = document.getElementById('root');
render(
    <div>SUB FRAME 1</div>,
    rootNode
);

src/index-frame2.js

import {render} from 'react-dom';

const rootNode = document.getElementById('root');
render(
    <div>SUB FRAME 2</div>,
    rootNode
);

Expected Behavior

I've an application that contains 2 sub iframes
Webpack generates 3 html files for the application
In dev mode, in case of code change, only the top level window might listne the events / try to refresh the page
or the main window need a way to advert the subframes to avoid listening

Actual Behavior

in dev mode, all the frames + root window are listening the hot reload changes.
In case of code change, the frames + root window tries to reload the page in same time
Chrome devTools frequently crashes because of to many logs (3x the progress logs) + interrupted sourcemaps decoding

For Bugs; How can we reproduce the behavior?

create an app with an iframe, both pointing to html pages managed by webpack

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

Do not ignore section how we can reproduce it, i.e. core and configuration, otherwise we can't help

In dev mode, in case of code change, only the top level window might listne the events / try to refresh the page
or the main window need a way to advert the subframes to avoid listening

Expected, why do you avoid changes here?

[paztis]

You want me to produce a full application to explain you the problem ?

Expected, why do you avoid changes here?

In case of liveReload (page reload), the subframe is destroyed during the top window unload
Then a new subframe is created.
Devtools encounter problems because it starts to decode sourcemap then destroy and load a new frame

I search a way to inform the subframes not to listen to socket events or at least to not refresh code.
But if I disable hot or liveReload, I do it also for top level window.

There's no way to provide different configs for each page produced by the same webpack build

[alexander-akait]

You want me to produce a full application to explain you the problem ?

Minimum or configuration

[paztis]

original comment updated with webpack config and index files

[alexander-akait]

You need to use injectHot as function and return false for index-frame1 and index-frame2

[paztis]

With injectHot and injectClient I only have the compile config as argument. How do I do a distinction between chunk entry of root index and chuck entries of frame index ? More it seems only called one time, not on each entry chunk

[paztis]

any other idea @alexander-akait ?

[alexander-akait]

We need improve injectClient and injectHot and pass entry to callback

[paztis]

Great that was my idea.

[alexander-akait]

Feel free to send a PR

[paztis]

I've take a look at it
I correctly see how to do it for webpack 4 (in lib/utils/devServerPlugin.js) in prependEntry, as I control all the chunks

const prependEntry = (originalEntry, additionalEntries) => {
      if (typeof originalEntry === 'function') {
        return () =>
          Promise.resolve(originalEntry()).then((entry) =>
            prependEntry(entry, additionalEntries)
          );
      }

      if (typeof originalEntry === 'object' && !Array.isArray(originalEntry)) {
        /** @type {Object<string,string>} */
        const clone = {};

        Object.keys(originalEntry).forEach((key) => {
          // entry[key] should be a string here
          const entryDescription = originalEntry[key];
        // ===========> job to do to decide to inject or not, depending of 'key' chunk
          clone[key] = prependEntry(entryDescription, additionalEntries);
        });

        return clone;
      }

      // in this case, entry is a string or an array.
      // make sure that we do not add duplicates.
      /** @type {Entry} */
      const entriesClone = additionalEntries.slice(0);
      [].concat(originalEntry).forEach((newEntry) => {
        if (!entriesClone.includes(newEntry)) {
          entriesClone.push(newEntry);
        }
      });
      return entriesClone;
    };

But in webpack 5 mode, I don't see how to do it

compiler.hooks.make.tapPromise('DevServerPlugin', (compilation) =>
        Promise.all(
          additionalEntries.map(
            (entry) =>
              new Promise((resolve, reject) => {
                compilation.addEntry(
                  compiler.context,
                  EntryPlugin.createDependency(entry, {}),
                  {}, // global entry
                  (err) => {
                    if (err) return reject(err);
                    resolve();
                  }
                );
              })
          )
        )
      );

Any idea of it ?

[alexander-akait]

We should improve our check, yes, it is not implemented

[paztis]

until this is developed, is there's any way to do it through custom plugin I can wrote or something else ? I'm using webpac-dev-server@3.11.2 and webpack@4.

I know how to do it inside your code for webpack 4, but useless to create a PR that didn't cover the webpack 5 case, or it is ?

[alexander-akait]

I don't think it is possible to solve on plugin level without extra hacks

[paztis]

Will you accept PR for version 3.11, or you stop enhancement on it an onli work on v4 ?