webpack / webpack/webpack-dev-server

Application with multiple iframes performances problems on hot reload

Open
#2,969 28 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
7.8k
Forks
1.5k
Avg merge
5h 32m
Merged PRs (30d)
6

Description

  • 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?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the hot-reload behavior with the webpack.config.js and the three entry files, src/index.js, src/index-frame1.js, and src/index-frame2.js. Start by running the multi-iframe app in webpack-dev-server with the shown configuration and observe reload events and logs in each frame. Done means a change reloads only the intended window or coordinates the frames without duplicate reloads and excessive logs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
tooling, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.