Reduce barrel file usage

[david-crespo]

Posting as a draft because this might be pointless. After getting rid of app/forms/index.ts, I saw that all the forms and fields were still being loaded on every page. After thinking about why this would be, I remembered that the routes file necessarily imports every page in the app, and that means that no matter what page you load, you have a dependency tree that ultimately points to every file used anywhere in the app.

So then I thought it might not be pointless if it helps with bundle splitting. I tested this theory by converting one form to a dynamic import.

diff showing how to convert a route to dynamic import

diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx
index 94c761b9..8fc49a11 100644
--- a/app/forms/ip-pool-create.tsx
+++ b/app/forms/ip-pool-create.tsx
@@ -21,7 +21,7 @@ const defaultValues: IpPoolCreate = {
   description: '',
 }
 
-export function CreateIpPoolSideModalForm() {
+export function Component() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()
 
diff --git a/app/routes.tsx b/app/routes.tsx
index fc2b73d0..bcc0749e 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -20,7 +20,6 @@ import {
 import { CreateImageFromSnapshotSideModalForm } from './forms/image-from-snapshot'
 import { CreateImageSideModalForm } from './forms/image-upload'
 import { CreateInstanceForm } from './forms/instance-create'
-import { CreateIpPoolSideModalForm } from './forms/ip-pool-create'
 import { EditIpPoolSideModalForm } from './forms/ip-pool-edit'
 import { IpPoolAddRangeSideModalForm } from './forms/ip-pool-range-add'
 import { CreateProjectSideModalForm } from './forms/project-create'
@@ -189,7 +188,7 @@ export const routes = createRoutesFromElements(
             handle={{ crumb: 'IP pools' }}
           >
             <Route path="ip-pools" element={null} />
-            <Route path="ip-pools-new" element={<CreateIpPoolSideModalForm />} />
+            <Route path="ip-pools-new" lazy={() => import('~/forms/ip-pool-create')} />
             <Route
               path="ip-pools/:pool/edit"
               element={<EditIpPoolSideModalForm />}

I then saw in the network tab that we were in fact no longer downloading app/forms/ip-pool-create.tsx on every page. But when I popped back to main and did the same thing, it had the same effect. That means getting rid of the app/forms barrel file was not necessary to achieve this effect, only the lazy import. Sad.

There's not really any downside to merging this since I already did the work and it's possible it will help with performance in other ways, for example by letting Vite be smarter about what files to hot reload.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Feb 26, 2024 5:09pm