Skip to content

webpack@4 Tree Shaking doesn't eliminate code between multiple entry points in same configuration object. #4453

@ryan-roemer

Description

@ryan-roemer

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

By way of example, I have:

  • util.js: ES exports two methods: red and blue via two scenarios: one-file (all code within one file) and re-export (methods re-exported from external files)
  • app1.js: Imports and uses only red
  • app2.js: Imports and uses only blue

Expected: If I build webpack bundles for both apps, app1 will have red and blue will be eliminated. Conversely, app2 will have blue and red will be eliminated:

Actual: Depends on config

  1. Array of Configs: If there is an array of configurations with a single entry point each for app1.js and app2.js the correct unused methods are dropped.
  2. Multiple Entry Points: If there is a single configuration object with multiple entry points for both app1.js and app2.js, then neither blue nor red are eliminated in either bundle. I would consider this a bug. Perhaps there is some known thing for "multiple entry points get any esnext exports used by any other entry point", but that seems weird.

If the current behavior is a bug, please provide the steps to reproduce.

We made a repository with passing and failing mocha tests to show the situation: https://github.com/FormidableLabs/webpack-tree-shaking-multiple-entry-points.

Reproduction:

$ git clone https://github.com/FormidableLabs/webpack-tree-shaking-multiple-entry-points.git
$ cd webpack-tree-shaking-multiple-entry-points
$ yarn install
$ yarn run build
$ yarn run test

The test output is:

  tree shaking in webpack4
    array
      one-file
        ✓ app1 should have red, not blue
        ✓ app2 should have blue, not red
      re-export
        ✓ app1 should have red, not blue
        ✓ app2 should have blue, not red
    multiple-entries
      one-file
        1) app1 should have red, not blue
        2) app2 should have blue, not red
      re-export
        3) app1 should have red, not blue
        4) app2 should have blue, not red


  4 passing (22ms)
  4 failing

The failing ones show that the ES methods that should be dropped aren't.

What is the expected behavior?

See above section on current behavior.

If this is a feature request, what is motivation or use case for changing the behavior?

Nope, it's a bug.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

$ node --version
v8.4.0

$  $ yarn list webpack
yarn list v1.3.2
└─ webpack@4.0.0-beta.1

$ uname -a
Darwin small.lan 16.7.0 Darwin Kernel Version 16.7.0: Thu Jan 11 22:59:40 PST 2018; root:xnu-3789.73.8~1/RELEASE_X86_64 x86_64

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