🤖 Optimize bundle size - reduce packaged app by 56% #354
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kylecarbs
force-pushed
the
bundle-size
branch
from
3c0582b to
9489f9c
Compare
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Reduced main bundle from 2.68 MB to 2.14 MB (19% reduction, 682 KB → 535 KB gzipped). **Shiki syntax highlighting:** - Switch from full Shiki bundle to shiki/core - Use on-demand language loading via dynamic imports - Theme loaded dynamically (min-dark.mjs) - Eliminated 638 language grammars from main bundle **Tokenizer encodings:** - Made o200k_base (6.3 MB) and claude (1.9 MB) lazy-load on-demand - Total 8.2 MB now loaded only when specific model is used - Added encoding cache to avoid redundant loads **Mermaid diagrams:** - Lazy-load Mermaid component with React.lazy() - Moved 497 KB to separate chunk - Added Suspense boundary with loading fallback **Build config:** - Added rollup-plugin-visualizer for bundle analysis - Configured to generate stats.html in production builds Remaining bundle size (2.14 MB) includes React, Emotion, core UI components, and the Vercel AI SDK. All heavy dependencies are now code-split appropriately. _Generated with `cmux`_
Add eslint-disable comments for intentional dynamic imports used for code-splitting: - Mermaid component lazy loading - Shiki language grammars on-demand - Shiki WASM engine and theme These dynamic imports are necessary for bundle optimization and are not hiding circular dependencies - they're explicit performance optimizations.
The React.lazy approach was causing E2E tests to timeout. While it reduced the main bundle slightly, the benefits don't outweigh the test failures. Keeping the Shiki and tokenizer optimizations which provide the bulk of the bundle size reduction without breaking tests.
kylecarbs
force-pushed
the
bundle-size
branch
from
bbd5be4 to
486e348
Compare
- Remove external declarations for tokenizer encodings from vite.config.ts to ensure they are bundled as lazy chunks instead of being excluded - Add countTokensSynchronously() to restore synchronous token counting once modules and encodings are loaded - Update countTokens() to use sync path when available, falling back to async loading only when needed Addresses Codex P1 review comments.
Dynamic imports for tokenizer encodings were causing E2E test timeouts similar to the Mermaid lazy-loading issue. By importing encodings statically at module load time, we avoid the async/lazy-loading complexity while still keeping tokenizer modules themselves lazy-loaded. This trades a small amount of bundle size for reliability - encodings are ~8MB total but are now guaranteed to be available synchronously once tokenizer modules load.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Significantly reduced bundle sizes through lazy-loading and proper dependency categorization.
Results
JavaScript Bundles (Vite output)
Packaged Electron App
Changes
1. Lazy-load Shiki syntax highlighting
shikibundle toshiki/core2. Lazy-load tokenizer encodings
3. Move renderer dependencies to devDependencies
4. Add bundle analysis tooling
Technical Details
Shiki changes:
src/utils/highlighting/shikiHighlighter.ts- UsecreateHighlighterCorewithcreateOnigurumaEnginesrc/utils/highlighting/highlightDiffChunk.ts- Dynamic import language grammars viaimport('shiki/langs/${lang}.mjs')Tokenizer changes:
src/utils/main/tokenizer.ts- Load encodings on-demand, cache loaded encodings to avoid redundant importsDependency changes:
package.json- Moved 16 renderer-only packages from dependencies to devDependenciesTesting
Generated with
cmux