FormidableLabs/webpack-tree-shaking-multiple-entry-points

Name: webpack-tree-shaking-multiple-entry-points

Owner: Formidable

Description: Multiple entry points issue with tree shaking / DCE

Created: 2017-03-08 22:50:26.0

Updated: 2017-08-15 20:00:56.0

Pushed: 2017-08-10 12:00:25.0

Homepage: null

Size: 5

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Webpack + Tree Shaking + Multiple Entry Points

Summary

Webpack correctly drops unused ESnext imports for multiple entry points when they are in completely different configuration objects, but when multiple entry points are within a single entry: configuration, any ESnext exports imported by any of the entry points are imported by all the entry points.

Reproduction steps

rn install
rn build
rn test

Test output:

ee 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


passing (22ms)
failing

A Little More Depth

The src directory contains two “scenarios” – one-file (named exports from a single file) and re-export (named re-exports from further files). Each scenario has two apps, app1.js which uses a common imported red function and app2.js which uses a common imported blue function.

Expectation: Webpack should produce bundles for each app without the unused function.

Actual - Arrays: (WORKS)

A configuration of arrays like webpack.config.arrays.js

t SCENARIOS = ["one-file", "re-export"];
t ENTRY_POINTS = ["app1", "app2"];

le.exports = SCENARIOS
ap((scenario) => ENTRY_POINTS.map((entryName) => ({
entry: {
  [entryName]: "./" + entryName + ".js"
},
))
 Flatten
educe((m, c) => m.concat(c), []);

works and drops the unused functions.

Output bundles at: dist/array

Actual - Multiple Entry Points: (FAILS)

A single configuration object with multiple entry points like webpack.config.multiple-entries.js

t SCENARIOS = ["one-file", "re-export"];

le.exports = SCENARIOS.map((scenario) => ({
try: {
app1: "./app1.js",
app2: "./app2.js"

does not work. red and blue are included in both app1 and app2 bundles.

Output bundles at: dist/multiple-entries