webpack / webpack/webpack-dev-server
Application with multiple iframes performances problems on hot reload
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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