webpack-dev-server
webpack-dev-server copied to clipboard
webpack
Application with multiple iframes performances problems on hot reload
- 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
- [x] 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?
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?
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
You want me to produce a full application to explain you the problem ?
Minimum or configuration
You need to use injectHot as function and return false for index-frame1 and index-frame2
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
We need improve injectClient and injectHot and pass entry to callback
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 ?
until this is developed, is there's any way to do it through custom plugin I can wrote or something else ? I'm using [email protected] 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 ?
I don't think it is possible to solve on plugin level without extra hacks
Will you accept PR for version 3.11, or you stop enhancement on it an onli work on v4 ?
If this does not require global changes, we can accept it, but you need send two PRs for v3 and v4
what it will require I think is a modification / enhancement of the injectClient init param signature, or another init param. Is it considered as global ?
On the next week I am working on dev server, so I will look at near future
@paztis Yeah, sorry for that, let's do rebase of you PR, I want to do a new release soon, so let's incude this in a new release