Search…
Babel
Shared babel presets.

@island.is/shared/babel/web

Configures babel-plugin-transform-imports to use deep imports instead of importing stuff from index files.

Deep Imports

Let's say we have a web-app which code-splits per page (like NextJS), and PageA uses a SectionA component and PageB uses a SectionB component, which are defined in our UI library. This creates the following chunks:
Note that PageA gets code that is only used on PageB and vice-versa, because they are imported from the index.ts file. Tree shaking only applies to code that is not used by the whole app (unfortunately).
For DX, and isolation, it's ideal to import everything from index.ts. However, for optimal code splitting, it's ideal to import stuff from where it is actually defined, with these chunks:
So we configure babel-plugin-transform-imports to change import statements and use exportFinder to recursively find the actual module that defines each export.