UI Foundations Kit makes tradeoffs in what it favors. Being designed for SaaS apps and focused on design over implemenation details, it is setup to be easily changed to fit your needs. This means that some optimizations are not included by default, but can be added as needed.

​
Lazy Loading Routes + Code Splitting

You can improve performance in SPA frameworks like Vite by lazy loading your routes (though Next.js does code split/lazy load routes by default). This means that the code for a route is only loaded when the user navigates to that route. This can be done using the built in React.lazy and Suspense components.

Change:

import { Account } from '~/routes/Account';

To:

const Account = React.lazy(() => import('~/routes/Account').then((m) => ({ default: m.Account })));

And then wrap the component in a Suspense component:

<Suspense fallback={<Loading />}>
  <Account />
</Suspense>

This has the negative tradeoff of making page loads feel less instantaneous, but can improve initial page load performance if that is more important for your project. UI Foundations Kit takes the stance that the initial page load is less important than the subsequent page loads and interactions

DeploymentIntegration