Address Vite warnings in build step (#193)

* removed use client from dialog component

* externalized fs/promises in rollupOptions

* addressed build warning

* lazy-load but keep the loaders colocated to their pages

* add experimentalMinChunkSize config to reduce amount of very small chunks

---------

Co-authored-by: Alan Alickovic <alan2207@live.com>

apps/react-vite/src/app/routes/app/discussions/discussion.tsx

@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
-import { LoaderFunctionArgs, useParams } from 'react-router-dom';
+import { useParams, LoaderFunctionArgs } from 'react-router-dom';
 
 import { ContentLayout } from '@/components/layouts';
 import { Spinner } from '@/components/ui/spinner';

apps/react-vite/src/app/routes/index.tsx

@@ -1,12 +1,9 @@
 import { QueryClient } from '@tanstack/react-query';
-import { createBrowserRouter } from 'react-router-dom';
+import { LoaderFunctionArgs, createBrowserRouter } from 'react-router-dom';
 
 import { ProtectedRoute } from '@/lib/auth';
 
-import { discussionLoader } from './app/discussions/discussion';
-import { discussionsLoader } from './app/discussions/discussions';
 import { AppRoot } from './app/root';
-import { usersLoader } from './app/users';
 
 export const createRouter = (queryClient: QueryClient) =>
   createBrowserRouter([
@@ -47,7 +44,12 @@ export const createRouter = (queryClient: QueryClient) =>
             );
             return { Component: DiscussionsRoute };
           },
-          loader: discussionsLoader(queryClient),
+          loader: async () => {
+            const { discussionsLoader } = await import(
+              './app/discussions/discussions'
+            );
+            return discussionsLoader(queryClient)();
+          },
         },
         {
           path: 'discussions/:discussionId',
@@ -57,15 +59,25 @@ export const createRouter = (queryClient: QueryClient) =>
             );
             return { Component: DiscussionRoute };
           },
-          loader: discussionLoader(queryClient),
+
+          loader: async (args: LoaderFunctionArgs) => {
+            const { discussionLoader } = await import(
+              './app/discussions/discussion'
+            );
+            return discussionLoader(queryClient)(args);
+          },
         },
         {
           path: 'users',
           lazy: async () => {
             const { UsersRoute } = await import('./app/users');
             return { Component: UsersRoute };
           },
-          loader: usersLoader(queryClient),
+
+          loader: async () => {
+            const { usersLoader } = await import('./app/users');
+            return usersLoader(queryClient)();
+          },
         },
         {
           path: 'profile',

apps/react-vite/src/components/ui/dialog/dialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import * as React from 'react';

apps/react-vite/vite.config.ts

@@ -24,4 +24,12 @@ export default defineConfig({
     },
   },
   optimizeDeps: { exclude: ['fsevents'] },
+  build: {
+    rollupOptions: {
+      external: ['fs/promises'],
+      output: {
+        experimentalMinChunkSize: 3500,
+      },
+    },
+  },
 });