Code splitting

This file was copied from the packages/webapp/src/stories/docs folder. Its accuracy as of August 8, 2024 has not been verified

Util functions

Code splitting for named export is not implemented

//Named export:
export function functionName() {}
export const constName = () => {};
//Default export:
export default function functionName() {}

Copy

Until we implement code splitting on named export, all large components or util functions should be in separate files.

For example, util/grabCurrency can be exported in util/index.js. However, if we need to import a component that uses a named export in util/index,

//Named export
import { aUtilFunction } from './index';
//default export
export default function ComponentWeNeed() {
  return <p>Hello world</p>;
}

Copy

grabCurrencySymbol will be imported along with containers/AddFarm/currency/commonCurrency.json table even if <ComponentWeNeed/> is not using grabCurrencySymbol function. As a result, commonCurrency will be included in the main.bundle

main.chunk on first load when grabCurrencySymbol is exported in util/index

main.chunk when grabCurrencySymbol is exported in util/grabCurrencySymbol

Route based code splitting

https://reactjs.org/docs/code-splitting.html

example: Routes.js

Lazy load component when component is not visible after first paint:

example: customSignUp