webpack / webpack/webpack-dev-server

[RFC] Drop websockets in favor of HTTP chunk streaming

Open
#2,460 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
7.8k
Forks
1.5k
Avg merge
5h 32m
Merged PRs (30d)
6

Description

  • This is a bug
  • This is a modification request
Context

A few years ago I started working on a Module bundler from scratch (Pundle / https://github.com/steelbrain/pundle), It worked well for most simple cases and had plugin support and everything, I couldn't focus on it because of my fulltime job. I am hoping to upstream some of the clever fixes to the limitations I found working with Browserify and Webpack.

Why drop websockets?

There are many reasons for why we would want to remove Websockets from the dev server. The simplest explanation through code is that, webpack dev server consumers do this:

const app = express()
app.use('/mycoolwebsite', webpackDevServer({...})
const server = app.listen(9123, ...)

To setup a websocket server on an http server, we require access to the http server instance in NodeJS, which is only available AFTER calling .listen(), we cannot have it when registering the webpackDevServer route. Currently this is handled by setting up the websocket server on a different port inside the middleware and connecting to it instead.

It is complicated to setup webpack dev server with HMR when working with proxies. All of this can be avoided if we do simple HTTP chunking as described below.

The proposed fix

For HMR, the client just needs to listen to the server for updates, so it's a one-way communication, not bi-directional. Using fetch() API with a TextDecoder, we can keep an HTTP connection open for as long as we want and continue to write onto it from the server.

Here's the Client / Server implementation of it in Pundle: https://github.com/steelbrain/pundle/blob/fee7d9dc055591bf002b5a66190d651a02dbdfa4/packages/pundle-dev-middleware/src/client/hmr-client.js#L137-L157 / https://github.com/steelbrain/pundle/blob/4152d29de8b28be69c3e21bd3589a6109726310a/packages/pundle-dev-middleware/src/index.js#L220-L229

As you can see, we no longer need to worry about HMR port or hostname, the client JS can do a request to the server with selfUrl.webpack.hmr, it'll be routed to webpack through the same proxy that loaded the JS in the first place, webpack can then continue to write chunks on it until the client disconnects.

Benefits of proposed approach
  • Massively reduce complexity for embedded dev server setups
  • Reduced codebase complexity and ease of maintenance

Please let me know if there's anything I can explain to make it more understandable. Happy to do a PR implementing this change.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the proposed Pundle HMR client and server entry points linked in the issue, then compare them with webpack-dev-server's current HMR and WebSocket flow. Determine the design and compatibility impact of replacing the bidirectional connection with HTTP chunk streaming; done would require an agreed implementation plan and a validated migration path.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
backend, devtools, web-dev
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.