statianzo / webpack-livereload-plugin

LiveReload during webpack --watch
ISC License
204 stars 51 forks source link

too many reloads, is my delay ignored? #55

Closed anvlkv closed 5 months ago

anvlkv commented 4 years ago

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.

statianzo commented 4 years ago

What do you mean by "cancels the request"?

Could you make an example repo with the issue?

infabo commented 4 years ago

Same here

infabo commented 4 years ago

What do you mean by "cancels the request"?

open network panel in chromium and there you can see these cancelled requests.

web-mi commented 4 years ago

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= get parameter. Maybe the appendScriptTag option is the problem? Tried without appendScriptTag and got the same error.

statianzo commented 4 years ago

If you could share an example repository with the problem, I'd be glad to take a look.

web-mi commented 4 years ago

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?

web-mi commented 4 years ago

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

web-mi commented 4 years ago

59 Should add the ablity to fix all problems by setting useSourceHash to true

vishal9p commented 3 years ago

@web-mi please can you merge the change in webpack 5.

web-mi commented 3 years ago

@vishal9p Everything should already been merged into the latest version.

vishal9p commented 3 years ago

@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

web-mi commented 3 years ago

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?

vishal9p commented 3 years ago

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

web-mi commented 3 years ago

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.

vishal9p commented 3 years ago

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

web-mi commented 3 years ago

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?

statianzo commented 3 years ago

Released as 3.0.2

https://unpkg.com/browse/webpack-livereload-plugin@3.0.2/index.js