Suggest a way of extracting critical JS that works with WDS

[Den-dp]

I have a pretty isolated JS file that is critical to run as early as possible (to reflect persisted theme preferences visually).

What is the best way to do this using webpack?

I've started with the simplest one:

module.exports = {
  mode: "development",
  entry: {
    theme: "./src/theme.js",
    main: "./src/index.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

and it kind of works but breaks the WDS experience, inserting 2 WDS/HMR clients:

lgGjEle0U8.mp4

Here is the repo to play with https://github.com/Den-dp/webpack-critical-js-example

[alexander-akait]

You can just put script tag in your HTML file before our script tags

[Den-dp]

Right, but for that:

• I need to produce this file somehow (in reality theme.js is slightly more complex and requires babel and typescript loaders, so I want to keep using webpack for that)
• this js file must also not contain WDS Client (don't want to see 2 WDS error overlays)

Any ideas?

[alexander-akait]

How you run webpack dev server? You can disable all additinal entries, like hot and client, inject your entry with theme code firstly, and then inject hot and client again, there is not magic, just look at https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L510, maybe we can implement an option to make it easy

[Den-dp]

How you run webpack dev server?

I use webpack serve command and the following webpack.config.js.

You can disable all additinal entries...

Do you mean something like this Den-dp/webpack-critical-js-example@f288289#diff-1fb26bc12ac780c7ad7325730ed09fc4c2c3d757c276c3dacc44bfe20faf166f ?

I wasn't happy with:

• maintaining "webpack-dev-server/client?hot=true&live-reload=true&overlay=true" string by hand
• adding complexity to webpack.config.js via conditional plugins and entries (with and without WDS) depending on current target (build/serve).
• minor: it adds HMR-related code anyway (here is how theme.js looks in WDS mode)

X9u9fR3ha1.mp4

[alexander-akait]

You don't need Den-dp/webpack-critical-js-example@f288289#diff-be0da604ab1105a43ece26c37d54752ea6078c3ffa186f7d4b54260472e254ba

Also please put your theme logic firstly here Den-dp/webpack-critical-js-example@f288289#diff-1fb26bc12ac780c7ad7325730ed09fc4c2c3d757c276c3dacc44bfe20faf166fR9

So code will run before webpack-dev-server code

So you need something like:

main: [
  "./src/critical-code.js",
  "webpack-dev-server/client?hot=true&live-reload=true&overlay=true",
  "webpack/hot/dev-server",
  "./src/index.js",
],

[alexander-akait]

We need some code to run hot and reload logic, that is why you have delay, if you need real something fast you need to put it before any logic, and there are only two solution:

1. You can use multi compiler mode, i.e. webpack.config.js - module.exports = [criticalCodeConfig, normalConfig]; and using https://webpack.js.org/configuration/other-options/#dependencies) run critical code compilation before normal then include this code in your HTML file before any other code
2. Modify dev server entries like above

The first solution is more flexible, because you can make more aggressive optimizations (look at terser options), avoid any extra async chunks (ouptut.asyncChunks) and more.