speed up development env with swc-loader and hmr

[christianvogt]

With this change, startup of dev server is faster and provides hot module reloading without full page refresh.

• Replace ts-loader with swc-loader but only for dev mode.
• Add webpack plugin ReactRefreshWebpackPlugin for fast hot module reloading.
• Add webpack plugin ForkTsCheckerWebpackPlugin to fork type checking to a separate thread.
• Add webpack plugin https://github.com/stephencookdev/speed-measure-webpack-plugin for measuring startup times.
  • Use only for measuring start up times. This will break react refresh plugin and cause hot reloading to fail.

To measure startup times use: MEASURE=true npm run start:dev:ext.

Start up times for frontend npm run start:dev:ext

swc-loader:
General output time took 33.89 secs
General output time took 31.31 secs
General output time took 31.66 secs

ts-loader:
General output time took 46.79 secs
General output time took 45.35 secs
General output time took 41.036 secs

Prior to any changes:

General output time took 1 min, 27.1 secs
General output time took 1 min, 25.41 secs
General output time took 1 min, 27.89 secs

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.64%. Comparing base (429d339) to head (6318620).
Report is 7 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3458      +/-   ##
==========================================
- Coverage   85.66%   85.64%   -0.03%     
==========================================
  Files        1347     1347              
  Lines       30680    30670      -10     
  Branches     8550     8550              
==========================================
- Hits        26282    26266      -16     
- Misses       4398     4404       +6     

see 11 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 429d339...6318620. Read the comment docs.

[jeff-phillips-18]

Start up is faster
Updates after a code change is a lot faster.

I haven't seen any issues.

/lgtm

(now if only we could get it to stop faster on a cntrl-c)

[DaoDaoNoCode]

Tested, hot reload is amazing. Loading is a lot faster.
/lgtm

[mturley]

This looks amazing, can't wait to get it merged and use it.

@christianvogt I did notice one weird thing - when I pass MEASURE=true, hot reloading isn't working and in fact the server appears to break after a change. After making a code change it never reloads, and then if I reload the page I get a blank white screen with this console error:

Without MEASURE set, everything works great. Do we care about that? If we do want to fix it maybe that can be a followup PR.

[christianvogt]

@mturley yes i guess I forgot to mention that. React refresh doesn't work with speed-measure-webpack-plugin :(

[mturley]

Ah got it. No worries then, I don't see a problem with merging.

[mturley]

Real good stuff.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: DaoDaoNoCode, mturley

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [mturley]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment