webpack-livereload-plugin: 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.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (3 by maintainers)

Most upvoted comments

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