-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Description
In Web they did a bunch of investigation about how to speed things up.
One thing they discovered what that using explicit component imports sped up their tests per https://github.com/Shopify/web/blob/master/documentation/decisions/09%20-%20Explicit%20root%20components%20imports.md
After some exploration, it was discovered that Jest recursively loads all imports when setting up the environment for a test file. If your test imports from an index file that re-exports many components, Jest will load all of these exports. This was a major issue for the root level components folder which is used throughout the application and loads many files in its index.
TL;DR: Importing lots of things from a component index file that reexports all components means Jest has to do lots of work, that usually isn't needed. Instead if we focus on only importing the components that we need, then Jest will have less work to do, and thus will run a little bit faster.
I think it'd be worth seeing if doing the same thing could have a positive effect on our test run time too.
- Delete
src/components/index.ts(moving all the rexports intosrc/index.tsfor external consumers) - Change everything that imports from that file to import from components directly. e.g.
- import {Avatar, Button} from 'components'; + import {Avatar} from 'components/Avatar'; + import {Button} from 'components/Button';
Sub-component index files (e.g. src/components/Card/components/index.ts can probably stay - the number of subcomponents within a component is usually very small and all those sub-components get used by the main component anyway. So my gut feel is removing those shall have a negligible effect.