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

refactor(ui): code-split gigantic Monaco Editor dep #12150

Merged
merged 4 commits into from
Nov 20, 2023
Merged

refactor(ui): code-split gigantic Monaco Editor dep #12150

merged 4 commits into from
Nov 20, 2023

Commits on Nov 5, 2023

  1. refactor(ui): code-split gigantic Monaco Editor dep 

    - shave off 7.72MB / 3MB minifed / 762KB gzipped from main bundle
  - main bundle itself is now only 5.11MB / 2.81MB minified / 553KB gzipped
    - i.e. the entire main bundle is smaller than the Monaco bundle 😮 😬

- wrap `react-monaco-editor` into a lazy loaded component
  - with some tiny gimmicks to it per in-line comments

- in `ObjectEditor`, asynchronously import `languages` as well in one of its effects
  - otherwise all of `monaco-editor` gets imported, per in-line comment
  - also rewrite that effect to use modern async/await instead of promise chains
    - which ends up a good bit simpler than what it would be with a promise chain with the new async import on top of the async fetch etc
    - and invert a conditional as well to reduce nesting / code complexity

- also refactor `ObjectEditor` a bit to correctly use `useRef` instead of `createRef`
  - the former is for legacy class-based components, the latter is for hooks-based functional components

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

  2. fix 4 space indentation 

    - my editor defaults to 2 space, oops
  - some of the code I copy+pasted (from previous code I wrote) was 4 space though, so ended up with mixed indentation 😕
  - weirdly didn't pop up when I ran `yarn lint` locally 🤔, possibly b/c I hadn't staged it yet?

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Nov 5, 2023
    Configuration menu
    Copy the full SHA
    9d5947d View commit details
    Browse the repository at this point in the history

  3. add webpackChunkName to all dynamic imports 

    - to make the bundle names a bit clearer
  - although pieces that got code split out of the dynamic imported bundles (e.g. `Chart.js` for instance) still have randomized names
    - that might require some fancy function to produce a cleaner `output.chunkName`, not sure

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Nov 5, 2023
    Configuration menu
    Copy the full SHA
    6ba9971 View commit details
    Browse the repository at this point in the history

  4. fix lint 

    - my local lint was erroring on an unstashed file (due to a TS version issue), so that's why it failed to reformat everything

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Nov 5, 2023
    Configuration menu
    Copy the full SHA
    2be6f16 View commit details
    Browse the repository at this point in the history