FormidableLabs/rlr-tree-shaking-experiment

Name: rlr-tree-shaking-experiment

Owner: Formidable

Description: redux-little-router experiments for https://github.com/FormidableLabs/redux-little-router/issues/261

Created: 2018-02-02 22:43:52.0

Updated: 2018-02-02 22:44:42.0

Pushed: 2018-02-05 22:36:22.0

Homepage: null

Size: 54

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

redux-little-router Experiments - Immutable/Tree Shaking Edition

Getting started

rn
rn build

Background

RLR issue https://github.com/FormidableLabs/redux-little-router/issues/261 notes that version v14.3.0 which introduced immutable has the following problems:

• immutable fails on import (by design) and creates a build warning, which can fail some CIs.
• If a dev task includes immutable, then that gets added to the bundle.

This shouldn't be happening, at least not the second part, as tree-shaking should remove everything.

Experiment

One webpack build, no babel, just a simple import in two forms:

ne-off-import.js
rt routerForBrowser from 'redux-little-router/es/environment/browser-router';

ole.log("TODO HERE", routerForBrowser);

s
oot-import.js
rt { routerForBrowser } from 'redux-little-router';

ole.log("TODO HERE", routerForBrowser);

These should be identical when run through a fully production webpack config. But they're not. Tree-shaking just doesn't work on root-import.js and it exhibits the bad behavior documented above. Looking to yarn build output below, one-off-import.js is a slim 115 kB while root-import.js ends up with 354 kB if immutable isn't anywhere installed and a whopping 499 kB if it is!

one-off-import.js stays small and does the correct thing no matter what.

Current Working Output

rn build
 run v1.3.2
 -rf dist && webpack
: 3d1897e7834fe159292f09c72fd20dff8a133297
ion: webpack 3.10.0
d
Hash: 3d1897e7834fe159292f
Time: 999ms
            Asset    Size  Chunks             Chunk Names
one-off-import.js  115 kB       0  [emitted]  one-off-import
   [8] ./one-off-import.js 127 bytes {0} [built]
    + 32 hidden modules

WARNING in one-off-import.js from UglifyJs
Side effects in initialization of unused variable addLeadingSlash [one-off-import.js:128,4]
[...SNIPPED...]


d
Hash: 09c72fd20dff8a133297
Time: 1903ms
         Asset    Size  Chunks                    Chunk Names
root-import.js  354 kB       0  [emitted]  [big]  root-import
  [55] ./root-import.js 101 bytes {0} [built]
    + 110 hidden modules

WARNING in ../node_modules/redux-little-router/es/immutable/util/immutable.js
Module not found: Error: Can't resolve 'immutable' in '/Users/rye/Desktop/TEMP_RLR/rlr-tree-shaking-experiment/node_modules/redux-little-router/es/immutable/util'
 @ ../node_modules/redux-little-router/es/immutable/util/immutable.js 14:14-34
 @ ../node_modules/redux-little-router/es/immutable/components/props-to-js.js
 @ ../node_modules/redux-little-router/es/immutable/components/link.js
 @ ../node_modules/redux-little-router/es/index.js
 @ ./root-import.js

WARNING in root-import.js from UglifyJs
Side effects in initialization of unused variable __WEBPACK_IMPORTED_MODULE_0_history_PathUtils___default [root-import.js:341,25]
Side effects in initialization of unused variable addLeadingSlash [root-import.js:390,4]
[...SNIPPED...]
one in 2.78s.