lazy loading and bundle size reduction

[benhalverson]

No description provided.

[Copilot]

Pull Request Overview

This PR implements lazy loading and bundle size optimizations by introducing code-splitting for route components, optimizing Three.js imports, and configuring manual chunks for better caching. The changes include a bundle analyzer plugin to monitor the impact of these optimizations.

• Implemented React lazy loading for all page components with a Suspense fallback
• Configured manual chunk splitting for major dependencies (React, Three.js, UI libraries, forms)
• Reduced Three.js imports to only what's needed (Vector3 instead of entire namespace)

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
vite.config.ts	Added bundle analyzer plugin and manual chunk configuration for vendor splitting
src/App.tsx	Converted page imports to lazy loading with Suspense boundary
src/components/PreviewComponent.tsx	Optimized Three.js imports to use named import instead of namespace
src/pages/Product.tsx	Updated Tailwind class from flex-shrink-0 to shrink-0 (shorthand)
package.json	Added rollup-plugin-visualizer dev dependency

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull Request Overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

[nitpick] The conditional plugin inclusion using (isAnalyze) && followed by .filter(Boolean) could be clearer. Consider using a ternary operator or spreading the plugin conditionally: ...(isAnalyze ? [visualizer({ ... })] : []) to make the intent more explicit.

Suggested change

	plugins: [viteReact(), tailwindcss(),
	(isAnalyze) &&
	visualizer({
	filename: 'stats.html',
	template: 'treemap', // 'sunburst' | 'network' | 'treemap'
	brotliSize: true,
	gzipSize: true,
	open: true,
	}),
	].filter(Boolean),
	plugins: [
	viteReact(),
	tailwindcss(),
	...(isAnalyze ? [
	visualizer({
	filename: 'stats.html',
	template: 'treemap', // 'sunburst' | 'network' | 'treemap'
	brotliSize: true,
	gzipSize: true,
	open: true,
	})
	] : []),
	],

[Copilot]

[nitpick] This condition matches 'react-router' but the chunk name 'react-vendor' suggests it's only for React core libraries. Since react-router is routing-related rather than core React, consider creating a separate 'router-vendor' chunk for clarity and better cache granularity.

Suggested change

	if (id.includes('node_modules/react') || id.includes('node_modules/react-dom') || id.includes('node_modules/react-router')) {
	return 'react-vendor';
	}
	if (id.includes('node_modules/react') || id.includes('node_modules/react-dom')) {
	return 'react-vendor';
	}
	if (id.includes('node_modules/react-router')) {
	return 'router-vendor';
	}

[Copilot]

The condition id.includes('node_modules/react') will incorrectly match packages like 'node_modules/react-hook-form' and 'node_modules/@react-three/', causing them to be bundled into 'react-vendor' instead of their intended chunks. Use more specific patterns like id.includes('node_modules/react/') or check for exact package boundaries.

Suggested change

	if (id.includes('node_modules/react') || id.includes('node_modules/react-dom') || id.includes('node_modules/react-router')) {
	if (
	id.includes('node_modules/react/') ||
	id.includes('node_modules/react-dom/') ||
	id.includes('node_modules/react-router/')
	) {