build(ui): improve performance with esbuild-loader
#12516
Merged
Commits on May 11, 2024
-
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 <[email protected]>
-
update argo-ui to fix type reexports
Signed-off-by: Anton Gilgur <[email protected]>
-
pin types-ramda as it requires TS>5
Signed-off-by: Anton Gilgur <[email protected]>
-
Signed-off-by: Anton Gilgur <[email protected]>
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.