perf: reduce initial bundle size by 93% through code splitting and dependency cleanup#419
Open
YagUber wants to merge 8 commits intocedya77:devfrom
Open
perf: reduce initial bundle size by 93% through code splitting and dependency cleanup#419YagUber wants to merge 8 commits intocedya77:devfrom
YagUber wants to merge 8 commits intocedya77:devfrom
Conversation
Vite 8 uses OXC transformer by default via @vitejs/plugin-react, replacing the SWC-based plugin. Build time reduced from 7s to 1s.
Node was reparsing postcss.config.js as an ES module on every build due to ESM syntax being detected without an explicit module type. Renaming to .mjs makes the module type explicit and eliminates the performance overhead warning. Cannot use "type": "module" in package.json as this breaks the CommonJS backend build.
If the maintainer (cedya77) still actively uses Lovable, this could and should be gated in vite.config.ts instead.
All settings tab components and catalog integration dialogs were statically imported, bundling everything into the initial load. Additionally Dashboard and RatingPage were statically imported in SettingsLayout despite being gated behind window.DASHBOARD_MODE and window.RATING_MODE flags. - Converted to React.lazy so each section and dialog only loads when first opened. - Also fixed settingsPages array to store component references instead of JSX instances.
Tremor was pulling in its own bundled copy of Recharts, Headless UI, and floating-ui, resulting in these libraries being shipped twice. - Replaced AreaChart and BarList with native Recharts equivalents and plain JSX respectively.
All dashboard tab components (Overview, Analytics, Content, Performance, System, Operations, Users) were defined in a single Dashboard.tsx file, preventing code splitting. - Extracted each into its own file and lazy loaded them.
In development builds, Rollup(down) includes the module name in chunk filenames for easier debugging. Production builds now use hash only filenames to avoid including internal module/component names in the shipped assets.
Contributor
Author
|
Let me know if this is something you are interested in, and I will rebase. If you are, #418 should go first since it fixes some dashboard theming issues that need to be moved to their respective extracted files. |
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
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
Significant bundle size and build time improvements through lazy loading, dependency cleanup, and proper code splitting.
Changes
Bundle Size
Dependency Changes
@tremor/reactwith native Recharts components, eliminating duplicate bundling of Recharts, Headless UI, and floating-uilovable-taggerdev dependency@vitejs/plugin-react(now uses OXC transformer by default)Code Splitting
Build Config
postcss.config.jstopostcss.config.mjsto avoid ESM reparse warning on every build