bundle-size

Import narrowly from specific modules instead of package roots, lazy-load route-level features with dynamic imports, and avoid polyfills for unsupported browsers. Run the build with rollup-plugin-visualizer to identify which libraries dominate each chunk.

Check bundlephobia.com or packagephobia.com for minified and gzipped sizes, then verify the package is ESM with sideEffects set to false so tree-shaking works. Also review peer dependencies, license, maintenance activity, and security advisories before adding it.

moment.js adds roughly 250KB and is largely deprecated, while date-fns supports per-method imports like import format from 'date-fns/format' at about 3KB. For simple formatting, native Intl.DateTimeFormat costs zero bundle bytes.

A default import of lodash pulls the entire library, around 70KB, because it defeats tree-shaking. Use per-method imports like lodash/debounce, or replace the utility with a native or local implementation.

Use dynamic imports with React.lazy for route-level features like chart pages, markdown editors, or playgrounds that are not needed on initial load. Vite emits each dynamic import as a separate chunk under dist/assets.

Bundle analysis addresses download size, not runtime cost. For rerender and list virtualization issues use a runtime performance skill, and for dev-server speed or chunk strategy configuration use Vite-specific tooling instead.