element-react webpack bundle reduce size tips & hints

Description

I’m using your library withwebpack but despite the low number of components I’m using, element-react into the bundle is 1mb.

I had

import {Loading, MessageBox} from 'element-react';

which I replaced by

import Loading from 'element-react/Loading';
import MessageBox from 'element-react/MessageBox';

but webpack is not able to locate them. I looked into node_modules/element-react and the structure is pretty hard to follow and not intuitive in order to include a simple component.

lodash for instance allow this, allowing me to save size in my final bundle.

import isString from 'lodash/isString';

Reproduce Steps

1. Any webpack dummy bundle using element-react

Error Trace (if possible)

ERROR in ./src/webui/src/modules/home/index.js
Module not found: Error: Can't resolve 'element-react/MessageBox' in '/src/webui/src/modules/home'
 @ ./src/webui/src/modules/home/index.js 50:18-53
 @ ./src/webui/src/app.js
 @ ./src/webui/src/index.js

ERROR in ./src/webui/src/modules/home/index.js
Module not found: Error: Can't resolve 'element-react/Loading' in '/src/webui/src/modules/home'
 @ ./src/webui/src/modules/home/index.js 46:15-47
 @ ./src/webui/src/app.js
 @ ./src/webui/src/index.js

Solution

A ES6 friendly way to include selectively components without include the whole package.

[e1emeb0t]

Another result from source-map-explorer

[e1emeb0t]

Appreciate for the details, can you try webspack’s treeshaking feature since we had published the ES6 code into the npm package, you can see jsnext:main in the package.json.