junk: Check build sizes for lazy loading widgets

Author: rschristian

src/components/widgets.js

@@ -1,14 +1,22 @@
+import { lazy } from 'preact-iso';
+
 import Jumbotron from './jumbotron';
 import GithubRepos from './github-repos';
 import TodoList from './todo-list';
 import Logo from './logo';
 import Toc from './table-of-contents';
-import BlogOverview from './blog-overview';
 import Sponsors from './sponsors';
-import WeAreUsing from './we-are-using';
-import Branding from './branding';
 import TabGroup from './tab-group';
 
+// Hoist the CSS to avoid FOUC
+import './branding/style.module.css';
+import './blog-overview/style.module.css';
+import './we-are-using/style.module.css';
+
+const Branding = lazy(() => import('./branding'));
+const BlogOverview = lazy(() => import('./blog-overview'));
+const WeAreUsing = lazy(() => import('./we-are-using'));
+
 export default {
 	Toc,
 	BlogOverview,

vite.config.js

@@ -28,6 +28,14 @@ export default defineConfig({
 						return 'assets/xmldom-[hash].js';
 					if (chunkInfo.facadeModuleId?.includes('@docsearch/react'))
 						return 'assets/docsearch-[hash].js';
+
+					if (chunkInfo.facadeModuleId?.includes('branding'))
+						return 'assets/branding-[hash].js';
+					if (chunkInfo.facadeModuleId?.includes('blog-overview'))
+						return 'assets/blog-overview-[hash].js';
+					if (chunkInfo.facadeModuleId?.includes('we-are-using'))
+						return 'assets/we-are-using-[hash].js';
+
 					return 'assets/[name]-[hash].js';
 				}
 			}