Code Splitting

Each device type is split into it's own file using React lazy so each device type only loads the relevant styles (eg. a Android device won't load iOS styles). The imports are destructured so only the referenced components are included in the build (tree shaking) while keeping a single import per device type to reduce network calls. The build tool has to support this feature to work, those known with support:

Example Import Code

const SelectDesktop = lazy(async () => {
  const { SelectDesktop } = await import("./desktop");
  return { default: SelectDesktop };
});