Long cold start time of development server

[Prajwalprakash3722]

• Description: The development server for the IEEE RVCE website made using React and bundled using Webpack takes a long time to start when running the npm start command, especially on the first run of the day. This slows down the development process and makes it difficult to iterate quickly.

Steps to reproduce:

Run the command npm start to start the development server, Observe the time taken for the server to start up.

• Expected behavior: The development server should start up quickly, allowing us to iterate quickly and efficiently.
• Actual behavior: The development server takes a long time to start up, which slows down the development process.
• Possible solution: Migrate the project from Webpack to VITE.

FYI @chrisvrose @MayurSChittaragi

[chrisvrose]

How long is the startup time? Let's have some numbers before we try to shift

We don't use webpack, we use whatever react-scripts gives us oob, which is conveniently webpack.

[Prajwalprakash3722]

Fresh start time (new npm install && npm start): 35.593s
Normal start time (npm start): 9s
Hot-reload time: 3s
Fresh build time: 55s
Repeated build time: 24s

Based on these numbers, it appears that the fresh start time is significantly longer than the other startup times. This may be due to the fact that a fresh start involves a lot of initialization and setup tasks.

[Prajwalprakash3722]

@chrisvrose I tried to migrate the build and dev rollup to vite, these are the results

• Dev Server

• Building for Prod

I recon this is a considerable improvement, anyhow we should look into optimising for prod build

[chrisvrose]

Sorry, missed the message earlier.

There are few points to consider for discussion

Fresh start time (new npm install && npm start): 35.593s

• This is really not that important - for dev or production (Matters even less here). For dev, there's two parts - npm install followed by npm start. Less than a minute (considering our site size) - we are good. However, it takes a while to download and set dependencies, so it depends on network as well. For production, we don't even use npm install, the container ships with all the dependencies. npm start - takes 9s as you mentioned, that is relatively okay, but it could be better.

Hot-reload time: 3s

• This is relatively important. Does vite improve on this?

Fresh build time: 55s
Repeated build time: 24s

• This is a pain, but I think this is a production build. Can we measure bundle sizes at the end?

There are two things that I think we should also take into consideration -

• Bundle size - If we see bundle size being larger, we have to consider the tradeoff between faster/smaller
• Maintaining - Right now, we pretend webpack is a part of react and roll with it. If we transfer to vite, it will become something we have to take care of. Do we want to be doing that?

[Prajwalprakash3722]

This is relatively important. Does vite improve on this?

Oh yes, it improves it to almost ~500ms

This is a pain, but I think this is a production build. Can we measure bundle sizes at the end?

Bundler	Gzip Size
Vite	341.33 Kib
Web-Pack	324.91 kB

We might have to do lot of dynamic imports, code spiting to improve the bundle size

Maintaining - Right now, we pretend webpack is a part of react and roll with it. If we transfer to vite, it will become something we have to take care of. Do we want to be doing that?

Yea, It's a better choice where we can customise the buiid and dev options, experiment and improve a lot.