feat: optimize vite chunks

[steveiliop56]

Summary by CodeRabbit

• Chores
  • Added build analysis tooling to improve development insights
  • Configured smart dependency bundling to optimize application performance, ensuring faster initial load times by intelligently splitting third-party libraries

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request adds bundle visualization and optimizes code-splitting in the frontend build configuration. Changes include a new rollup-plugin-visualizer dependency, updated gitignore for generated stats files, and Vite configuration updates to split vendor code into separate chunks for React, Radix UI, i18next, and Zod.

Changes

Cohort / File(s)	Summary
Build Configuration frontend/vite.config.ts, frontend/package.json	Added rollup-plugin-visualizer plugin and configured custom code-splitting with manualChunks to separate vendor dependencies (React, Radix UI, i18next, Zod) into dedicated bundles.
Gitignore Updates frontend/.gitignore	Added stats.html to the ignored files under the Stats out section.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Bundle chunks now split with care,
Vendor code floats light as air,
React, Radix, i18next too,
Stats to show what builds can do,
Visualizer hops into view!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: optimize vite chunks' accurately describes the main change: optimizing Vite's code-splitting configuration through manual chunk management and visualizer plugin integration.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/optimize-vite-chunks

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 15.96%. Comparing base (6112f97) to head (ae71280).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #651   +/-   ##
=======================================
  Coverage   15.96%   15.96%           
=======================================
  Files          48       48           
  Lines        3515     3515           
=======================================
  Hits          561      561           
  Misses       2897     2897           
  Partials       57       57           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/vite.config.ts (1)

9-9: Consider running the visualizer only during analysis builds.

visualizer() is included unconditionally, so it runs on every production build and emits stats.html. This adds a small overhead and produces an artifact that's typically only needed during bundle analysis. You could gate it behind an env variable or Vite mode.

Example

-  plugins: [react(), tailwindcss(), visualizer()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    ...(process.env.ANALYZE ? [visualizer({ open: true })] : []),
+  ],

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/vite.config.ts` at line 9, The visualizer plugin is being added
unconditionally (plugins: [react(), tailwindcss(), visualizer()]) which emits
stats.html on every build; change the Vite config to include visualizer() only
when enabled (e.g., process.env.ANALYZE === 'true' or config.mode ===
'analyze'): create a conditional visualizerPlugin variable (null when disabled,
visualizer() when enabled) and spread/filter it into the plugins array (e.g.,
const plugins = [react(), tailwindcss(), ...(visualizerPlugin ?
[visualizerPlugin] : [])] or plugins.filter(Boolean)) so production builds skip
the visualizer unless explicitly requested.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/vite.config.ts`:
- Around line 18-37: The manualChunks check for React is too broad: replace the
loose id.includes("/react") check in manualChunks with a precise match for core
React packages (e.g., only match node_modules paths for "react" and "react-dom"
using a regex that looks for /node_modules\/(react|react-dom)([\\/]|$)) so other
packages like react-i18next fall through to their specific checks
(vendor-i18next) and don't get lumped into vendor-react; also gate the
visualizer() plugin so it only runs for analysis/dev builds (e.g., only include
visualizer() when an ANALYZE env var or build mode flag is set) to avoid running
it unconditionally.

---

Nitpick comments:
In `@frontend/vite.config.ts`:
- Line 9: The visualizer plugin is being added unconditionally (plugins:
[react(), tailwindcss(), visualizer()]) which emits stats.html on every build;
change the Vite config to include visualizer() only when enabled (e.g.,
process.env.ANALYZE === 'true' or config.mode === 'analyze'): create a
conditional visualizerPlugin variable (null when disabled, visualizer() when
enabled) and spread/filter it into the plugins array (e.g., const plugins =
[react(), tailwindcss(), ...(visualizerPlugin ? [visualizerPlugin] : [])] or
plugins.filter(Boolean)) so production builds skip the visualizer unless
explicitly requested.