FormidableLabs/victory-line-experiments

Name: victory-line-experiments

Owner: Formidable

Description: Bundle size experiments

Created: 2017-04-02 16:55:32.0

Updated: 2017-04-02 16:57:29.0

Pushed: 2017-04-03 17:06:59.0

Homepage: null

Size: 33

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

VictoryLine Experiments

Various Webpack configuration hacking for an efficient, terse app bundle with VictoryLine from victory.

Background

Victory builds to ES6 es which is pointed to in package.json:module so we should get full tree-shaking benefits. But we don't until webpack@4.

Related other tickets:

• victory#547: Original discussion spurring this repo.
• victory#549: Webpack tree shaking does not completely remove unused re-exports
• victory#548: Provide efficient webpack helpers for tree-shaking + DCE

The Two Builds

We have two entry points that only differ in:

se-index.js
se the full index with all re-exported components.
rt { VictoryLine } from "victory";

and

ne-off-import.js
o straight off of the full path to the individual component.
rt VictoryLine from "victory-chart/es/components/victory-line/victory-line";

Building

Here's current for webpack@3:

st build
rn run build
 -c dist/*
6629 dist/one-off-import.js
0275 dist/use-index.js

 custom minification that's actually readable while still doing DCE
 you can inspect `dist.main.js` to look for tree shaking (`unused` comments).
MO=true yarn run build
wc -c dist/*
0848 dist/one-off-import.js
7913 dist/use-index.js

Analysis - One Off vs. Using Index

There is a significant different in size for webpack@3:

• one-off-import.js: 296 KB
• use-index.js: 460 KB