reactjs - Building Lexical editor playground - Stack Overflow

admin管理员组

文章数量:1291176

I have no experience in web stack. I am trying to build a Lexical editor playground component (live at / and its source in ), so that I can later modify its source code and build my own editor-like app.

The dependencies installation stage (completes okay in about 10 minutes as it's on WSLv1 Ubuntu 24.04 but with a lot of warnings/deprecations, and note that it pulls > 1500 packages):

curl -L .24.0.tar.gz | tar -xzf - --strip-components=1

npm install glob
npm install --prefix packages/lexical-playground --force
# ls node_modules | wc -l # 1415
# ls packages/lexical-playground/node_modules | wc -l # 135

The build stage produces 232 files: (find packages/lexical-playground/build/ | wc -l) - in fonts, images, JavaScript and CSS files):

npm run build
npm run --prefix packages/lexical-playground  build-prod
# cd packages/lexical-playground/build && python -m http.server

The packages/lexical-playground/build/assets/main-*.js file sizes 22 megabytes (funnily the file gets detected as Trojan:HTML/FakeCaptcha.HNA!MTB by Windows Defender, so I had to allow-list it)

1. Is it possible to make the vite/rollup to produce a single HTML, a single JS and a single CSS (and inline any SVG/fonts)? Is it possible to make it to produce a single HTML and embed everything in it? Like so, the full app is trivially deployable and runnable from file:///

2. Why is it taking so much space: 22 megabytes in just the main JavaScript file (not counting font files, CSS files and example images)? What and how can I make it more compact? (I'm willing to disable ExcaliDraw / KaTeX / yjs for collaboration / babel for highlighting if this allows to save space. But I'm still surprised it comes off as so heavy output file)

Thank you!

本文标签： reactjsBuilding Lexical editor playgroundStack Overflow