Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

build(ui): improve performance with esbuild-loader #12516

Merged
merged 5 commits into from
May 13, 2024
Merged

build(ui): improve performance with esbuild-loader #12516

merged 5 commits into from
May 13, 2024

Commits on May 11, 2024

  1. build(ui): improve performance with esbuild-loader 

    - similar to [Argo CD](https://github.com/argoproj/argo-cd/blob/d9df2525c57d4870215a6ce149dbedd08ae05fdb/ui/src/app/webpack.config.js#L37) and many other projects, we can use `esbuild` instead of TS etc to significantly speed up build times
  - (as `esbuild` is written in Go and compiled instead of using interpreted TS/JS)
  - we don't use any Babel or TS plugins, so I think this codebase is a good candidate for that
  - it also simplifies the build process as well, removing & replacing many other deps
  - caveats:
    - `esbuild` does not do type-checking, so we have to run `tsc --noEmit` as part of the `lint` phase
      - `isolatedModules` config is needed to ensure compatibility with this
    - `esbuild` does not currently support React Fast Refresh
      - `react-hot-loader` was replaced by [React Fast Refresh](https://github.com/pmmmwh/react-refresh-webpack-plugin) and is deprecated / hasn't received an update in 2 years
        - remove `module.hot` etc usage of `react-hot-loader` as well
      - that being said, `esbuild` is significantly faster than using Babel or TS for builds, so hot reloading is nice but not necessary
        - also hot reloading can be buggy

- further optimize dev builds by using cheaper `eval` sourcemaps as [recommended by Webpack for performance](https://webpack.js.org/configuration/devtool/)
  - prod builds should always have highest quality sourcemaps, so do not change those

- remove unused `react-paginate` `exclude`
  - it's not a dep we currently use; it doesn't exist in the lockfile
    - (nor in `argo-ui`'s lockfile, of which all prod deps would be in Workflows's lockfile)

some simple performance testing when running natively on macOS, taken directly from Webpack's reported stats:
- before:
  - prod build: ~65s
  - dev build: ~22s
  - dev rebuild: ~1.8s
- after:
  - prod build: ~50s (~25% faster)
  - dev build: ~16s (~25% faster)
  - dev rebuild: ~.8s (~50% faster)
- these are not as good improvements as I would have liked, which mean there are bigger bottlenecks elsewhere
  - e.g. Webpack itself (analysis, source maps, running loaders), sass-loader, etc
  - switching to `esbuild` directly may further improve these stats
    - i.e. instead of Webpack + `esbuild-loader`

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed May 11, 2024
    Configuration menu
    Copy the full SHA
    f52df81 View commit details
    Browse the repository at this point in the history

  2. update argo-ui to fix type reexports 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed May 11, 2024
    Configuration menu
    Copy the full SHA
    234df82 View commit details
    Browse the repository at this point in the history

  3. pin types-ramda as it requires TS>5 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed May 11, 2024
    Configuration menu
    Copy the full SHA
    f20fd02 View commit details
    Browse the repository at this point in the history

  4. workaround TS v5.1 typing 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed May 11, 2024
    Configuration menu
    Copy the full SHA
    a4511f6 View commit details
    Browse the repository at this point in the history

  5. fix type error 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed May 11, 2024
    Configuration menu
    Copy the full SHA
    a3cdc81 View commit details
    Browse the repository at this point in the history