webpack-livereload-plugin
webpack-livereload-plugin copied to clipboard
statianzo
too many reloads, is my delay ignored?
I've set a delay already
new LiveReloadPlugin({
appendScriptTag: true,
delay: 3000
})
and
watchOptions: {
aggregateTimeout: 300,
ignored: ['node_modules']
},
Still my browser tries to reload 30 times and cancels the request.
What do you mean by "cancels the request"?
Could you make an example repo with the issue?
What do you mean by "cancels the request"?
open network panel in chromium and there you can see these cancelled requests.
I got the same problem.
But the delay is working. It just notifies once after delay but the assets are getting reloaded multiple times with a new ?livereload=
If you could share an example repository with the problem, I'd be glad to take a look.
I digged into it and found the problem. Every file which is not a css or image file will trigger a browser reload in tiny-lr. (Note: for every single file)
If you add the following configuration to your LiveReloadPlugin options it will trigger a reload for every file changed expecting css and image files:
new LiveReloadPlugin({
liveCSS: false,
liveImg: false,
})
The problem happens if you build multiple files in your webpack configuration:
module.exports = {
entry: {
first: [
'./js/first.js',
'./js/first.css',
],
second: [
'./js/second.js',
'./js/second.css',
],
third: [
'./js/third.js',
'./js/third.css',
],
},
// ...
};
This will create/renew the following assets at once and will trigger them as changed in webpack watch: (Don't know why it rebuilds everything if i just changing first.js for example) assets/first.js assets/first.css assets/first.js.map assets/second.js assets/second.css assets/second.js.map assets/third.js assets/third.css assets/third.js.map
Every single file will now trigger a file reload or page reload depending on the configuration. And every new request will kill the previous one which will result in the high load and the failing requests in the console.
Currently i don't know a good solution. notifyClients needs any files to trigger a reload. For js you could just always give a non existing .js file and it will reload but thats a really bad solution. There is a open PR for just sending changed files. Maybe this will work with this webpack configuration?
I found this issue for multiple files rebuilds so maybe the first solution will be fixing the multiple created files. https://github.com/webpack/webpack/issues/7007
#59 Should add the ablity to fix all problems by setting useSourceHash to true
@vishal9p Everything should already been merged into the latest version.
@web-mi still i can see the issue i am using latest webpack 5
You mentioned there is one open PR which is for just sending changed files.please can you share it
And for me i cannot use useSourceHash facing some other issue saying content and map not valid
I think i mean the #33 but it should be required anymore. Maybe with the latest changes useShourceHash gets broken? Could you share your error?
And could you try useSouceSize instead?
I think i mean the #33 but it should be required anymore. Maybe with the latest changes useShourceHash gets broken? Could you share your error?
And could you try useSouceSize instead?
@web-mi it worked with useSouceSize. But this changes are not present in 3.0.1 so please can you publish your changes with new version maybe 3.0.2
You mean the changes from #33 are not present in 3.0.1? These changes are not required anymore because of the new options useSourceHash and useSourceSize.
useSourceHash
In 3.0.1 in index.js we are not seeing useSourceSize prop.but this is present in master.I think you need to publish a newer version
Ahh sorry. You are right. The latest change not published.
Maybe in the latest version useSouceHash is already working again.
@statianzo Could you publish a new version with the latest changes?