Skip to content

Support treeshaking via sideEffects in package.json #1331

@mattcosta7

Description

@mattcosta7

Describe the bug

When consuming a single @primer/components component, the entire set of components is included in the build (even when using lib-esm), since the package.json does not declare the package as free of sideEffects via sideEffects: false or sideEffects: ['file 1', 'file 2']

Deep importing like

import {Button} from '@primer/components/lib-esm/components/Button' seems to work properly, however if any import to import {} from '@primer/components' is made, then eveything exported from @primer/components is included in the build

To Reproduce
Steps to reproduce the behavior:

  1. Open a new project
  2. Add @primer/components as a dependency
  3. Import a single component like import {Button} from '@primer/components'
  4. Generate and analyze a bundle, note that all components are included in bundle

Expected behavior

Only the used components are included in the build

Screenshots

My project, bundled with webpack 4 emits a bundle containing this:

Screen Shot 2021-07-15 at 10 43 21 AM

Which includes components like etc which are not used in my project.

Updating the node_modules package.json for @primer/components to include sideEffects: false and rebuilding with the same command leads to a bundle containg this

Screen Shot 2021-07-15 at 10 34 54 AM

Which removes unused components from my project, leading to a large reduction in bundle size

Desktop (please complete the following information):

  • N/A

Smartphone (please complete the following information):

  • N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions