Skip to content

fix(form/Editor): only use the bundled monaco editor #3169

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.

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

SkyeYoung
Copy link
Member

@SkyeYoung SkyeYoung commented Aug 13, 2025

Please answer these questions before submitting a pull request, or your PR will get closed.

Why submit this pull request?

  • Bugfix
  • New feature provided
  • Improve performance
  • Backport patches

What changes will this PR take into?

Ensure that only the bundled Monaco is used.

OLD NEW
imageimage imageimageimage

Related issues

fix/resolve #3167

Checklist:

  • Did you explain what problem does this PR solve? Or what new features have been added?
  • Have you added corresponding test cases?
  • Have you modified the corresponding document?
  • Is this PR backward compatible? If it is not backward compatible, please discuss on the mailing list first

@SkyeYoung SkyeYoung changed the title fix(form/Editor): bundle monaco editor fix(form/Editor): only use the bundled monaco editor Aug 13, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes an issue with the Monaco Editor integration by ensuring only the bundled Monaco Editor is used instead of potentially mixing different versions. The changes remove the dynamic Monaco setup and implement a static initialization approach.

  • Removes dynamic Monaco setup function and implements static initialization
  • Updates import statements to use the bundled Monaco editor directly
  • Removes the beforeMount callback that was causing potential version conflicts

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@bzp2010
Copy link
Contributor

bzp2010 commented Aug 13, 2025

Will this make the build artifacts larger?

@SkyeYoung
Copy link
Member Author

SkyeYoung commented Aug 13, 2025

@bzp2010 I tried packing it up and found that there are indeed many unused ones that are not useful, so let me see how to deal with it.(Although they are not bigger than antd)

@SkyeYoung
Copy link
Member Author

SkyeYoung commented Aug 14, 2025

@bzp2010 I've added manual chunks to determine the size occupied by Monaco.

// old
dist/assets/apisix-logo-HMKlWzJ1.svg               0.81 kB │ gzip:   0.39 kB
dist/index.html                                    0.86 kB │ gzip:   0.41 kB
dist/assets/codicon-DCmgc-ay.ttf                  80.34 kB
dist/assets/editor.worker-oRlJJsnX.js            234.39 kB
dist/assets/json.worker-BnUULff4.js              366.81 kB
dist/assets/monaco-editor-vendor-C37UlGMP.css    133.05 kB │ gzip:  21.19 kB
...
dist/assets/react-vendor-DoC2WAmd.js              12.45 kB │ gzip:   4.41 kB
dist/assets/monaco-editor-vendor-vNTR5Nef.js      16.29 kB │ gzip:   5.75 kB
dist/assets/index-F8cMEI97.js                    781.75 kB │ gzip: 240.26 kB
dist/assets/antd-vendor-6KqauUkE.js            1,910.39 kB │ gzip: 602.56 kB
total: 3.8M    dist

// new
dist/assets/apisix-logo-HMKlWzJ1.svg               0.81 kB │ gzip:   0.39 kB
dist/index.html                                    0.86 kB │ gzip:   0.40 kB
dist/assets/codicon-DCmgc-ay.ttf                  80.34 kB
dist/assets/editor.worker-oRlJJsnX.js            234.39 kB
dist/assets/json.worker-BnUULff4.js              366.81 kB
dist/assets/monaco-editor-vendor-CUMOsoFg.css    133.05 kB │ gzip:  21.21 kB
...
dist/assets/react-vendor-DoC2WAmd.js              12.45 kB │ gzip:   4.41 kB
dist/assets/jsonMode-BmdQK4IJ.js                  41.83 kB │ gzip:  12.15 kB
dist/assets/index-D_R-G-sa.js                    781.70 kB │ gzip: 240.25 kB
dist/assets/antd-vendor-C01oSD3T.js            1,910.39 kB │ gzip: 602.57 kB
dist/assets/monaco-editor-vendor-DU3RmTXG.js   3,280.78 kB │ gzip: 846.12 kB
total: 7.0M    dist

We will find that the size of the Monaco editor starts from (gzip: 5.75 kB) to (gzip: 846.12 kB).

But I think the Monaco editor part is necessary for now. As for the size, there might be ways to further reduce the size, but I don't have time to research further at the moment.(We might as well consider removing parts of antd.)

image

Manual chunks will optimize the first screen loading to some extent, and I've decided to keep it in this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

apisix admin ui use third-party JavaScript
2 participants