Skip to content

Investigate removing components index to speed up tests #3677

@BPScott

Description

@BPScott

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 into src/index.ts for 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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions