Webpack tree shaking does not completely remove unused re-exports

[ryan-roemer]

Status: Retry experiment after ES modules build lands in all victory repos.

• Originally from Reduce (drastically) bundle size #547
• Sample repo at: https://github.com/FormidableLabs/victory-line-experiments
• Possible solution: https://bitbucket.org/amctheatres/babel-transform-imports (transforms to one off imports)

Webpack2 tree shaking does not completely remove unused exports, meaning that there is a difference between a one-off import vs. a full re-export use like:

// use-index.js
// Use the full index with all re-exported components.
import { VictoryLine } from "victory-chart";

and

// one-off-import.js
// Go straight off of the full path to the individual component.
import VictoryLine from "victory-chart/components/victory-line/victory-line";

The Problem

There is a significant different in size:

• one-off-import.js: 272 KB
• use-index.js: 423 KB

Diffing a demo build (which is human readable) and some random information:

$ colordiff -Naur dist/one-off-import.js dist/use-index.js

victory-core/src/victory-primitives/index.js

Just picking one example on a quick skim, the use-index version exports of the above file the following additional components not exported by one-off-import:

• Candle
• Voronoi
• ErrorBar
• Point
• Bar
• Area
• `Line

diff:

-}, /* 61 */
+}, /* 77 */
 /* exports provided: Area, Bar, Candle, ClipPath, Curve, ErrorBar, Line, Point, Slice, Voronoi, Flyout */
-/* exports used: Curve, Flyout, ClipPath */
+/* exports used: Flyout, ClipPath, Candle, Voronoi, ErrorBar, Point, Bar, Area, Line, Curve */
 /*!*********************************************************!*\
   !*** ../~/victory-core/src/victory-primitives/index.js ***!
   \*********************************************************/

Looking just to Candle (victory-core/src/victory-primitives/candle.js, index: 200 in one-off), there is a problem with tree-shaking. Namely, that even in the one-off version, this code is detected as unused, but we still get the require for it:

__webpack_require__(/*! ./candle */ 200)

and the underlying source is present at index 200.

The use-index build has an even greater cascading effect of this problem.

Upon further research, all of this runs up against what appears to be a long-standing bugs for webpack:

• webpack/#2867: Tree shaking completely broken?
• webpack/#1750: tree-shaking with lodash-es

Best synopsis of observed issue so far: webpack/webpack#1750 (comment)

/cc @boygirl @chrisbolin

[ryan-roemer]

The new updates in webpack@4 with sideEffects: false setting may solve this issue.

[boygirl]

@ryan-roemer I'm going to close this, but ping me if you think it should remain open.

[ryan-roemer]

We should verify first that present victory works with tree-shaking for webpack4. I believe there still may be issues. Let's pull a branch in https://github.com/FormidableLabs/victory-line-experiments and update webpack + victory deps and see.

[ryan-roemer]

@boygirl -- I updated everything in https://github.com/FormidableLabs/victory-line-experiments to completely modern and we're all good: in dev (with optimizations on) or prod (straight up) one-off is the same as tree shaken:

# production
$ wc -c dist/*{index,import}.min.js
  248226 dist/use-index.min.js
  248232 dist/one-off-import.min.js

# development (with sideEffects optimizations on.)
$ wc -c dist/*{index,import}.js
  888503 dist/use-index.js
  888676 dist/one-off-import.js

🎉