feat: optimize web app bundle size

- Fix Next.js config to enable bundle analyzer
- Replace barrel file exports with explicit named exports for better tree-shaking
- Create dynamic Chart.js component to reduce initial bundle size
- Optimize icon library exports to only include commonly used icons
- Update imports to use dynamic loading for Chart.js components

Bundle analyzer reports generated showing optimization impact.
Addresses BUS-1459.

Co-Authored-By: nate@buster.so <nate@buster.so>
This commit is contained in:
Devin AI 2025-07-19 16:19:11 +00:00
parent d3e2577d13
commit 4b21570145
7 changed files with 37 additions and 21 deletions

View File

@ -2,6 +2,7 @@ import path, { dirname } from 'node:path';
import { fileURLToPath } from 'node:url'; import { fileURLToPath } from 'node:url';
import env from './src/config/env.mjs'; import env from './src/config/env.mjs';
import { withPostHogConfig } from '@posthog/nextjs-config'; import { withPostHogConfig } from '@posthog/nextjs-config';
import withBundleAnalyzer from '@next/bundle-analyzer';
const __filename = fileURLToPath(import.meta.url); const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename); const __dirname = dirname(__filename);
@ -146,17 +147,6 @@ const nextConfig = {
} }
}; };
// export default withBundleAnalyzer({ export default withBundleAnalyzer({
// enabled: process.env.ANALYZE === 'true' enabled: process.env.ANALYZE === 'true'
// })(nextConfig); })(nextConfig);
// export default withPostHogConfig(nextConfig, {
// enabled:
// !!process.env.POSTHOG_API_KEY &&
// !!process.env.POSTHOG_ENV_ID &&
// process.env.POSTHOG_API_KEY !== 'undefined',
// personalApiKey: process.env.POSTHOG_API_KEY,
// envId: process.env.POSTHOG_ENV_ID
// });
export default nextConfig;

View File

@ -1,2 +1,2 @@
export * from './BackButton'; export { BackButton } from './BackButton';
export * from './Button'; export { Button, type ButtonProps } from './Button';

View File

@ -1,6 +1,6 @@
import type React from 'react'; import type React from 'react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { BusterChartJS } from './BusterChartJS'; import { BusterChartJSDynamic } from './BusterChartJSDynamic';
import { useDatasetOptions } from './chartHooks'; import { useDatasetOptions } from './chartHooks';
import type { import type {
BusterChartComponentProps, BusterChartComponentProps,
@ -72,5 +72,5 @@ export const BusterChartComponent: React.FC<BusterChartRenderComponentProps> = (
] ]
); );
return <BusterChartJS {...chartProps} />; return <BusterChartJSDynamic {...chartProps} />;
}; };

View File

@ -1 +1 @@
export * from './BusterChartJS'; export { BusterChartJS } from './BusterChartJS';

View File

@ -0,0 +1,10 @@
import dynamic from 'next/dynamic';
import { CircleSpinnerLoaderContainer } from '../loaders';
export const BusterChartJSDynamic = dynamic(
() => import('./BusterChartJS/BusterChartJS').then((mod) => ({ default: mod.BusterChartJS })),
{
ssr: false,
loading: () => <CircleSpinnerLoaderContainer />
}
);

View File

@ -1 +1,17 @@
export * from './NucleoIconOutlined'; export {
Copy,
Check3 as Check,
ChevronDown,
ChevronUp,
ArrowUp,
ArrowRight,
ArrowUpRight,
HouseModern,
MapSettings,
User,
Window,
WindowAlert,
WindowSettings,
WindowUser,
WindowEdit
} from './NucleoIconOutlined';

View File

@ -1 +1 @@
export * from './AppModal'; export { AppModal, type ModalProps } from './AppModal';