mirror of https://github.com/buster-so/buster.git
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:
parent
d3e2577d13
commit
4b21570145
|
@ -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;
|
|
||||||
|
|
|
@ -1,2 +1,2 @@
|
||||||
export * from './BackButton';
|
export { BackButton } from './BackButton';
|
||||||
export * from './Button';
|
export { Button, type ButtonProps } from './Button';
|
||||||
|
|
|
@ -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} />;
|
||||||
};
|
};
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
export * from './BusterChartJS';
|
export { BusterChartJS } from './BusterChartJS';
|
||||||
|
|
|
@ -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 />
|
||||||
|
}
|
||||||
|
);
|
|
@ -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';
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
export * from './AppModal';
|
export { AppModal, type ModalProps } from './AppModal';
|
||||||
|
|
Loading…
Reference in New Issue