Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

element-react webpack bundle reduce size tips & hints

See original GitHub issue


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

screen shot 2017-07-15 at 10 56 51 pm

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


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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

e1emeb0tcommented, Jul 17, 2017

Another result from source-map-explorer

wx20170717-174814 2x wx20170717-174845 2x
e1emeb0tcommented, Jul 17, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

5 Methods to Reduce JavaScript Bundle Size - Bits and Pieces
1. Code Splitting with Webpack. Code splitting allows you to separate your code into bundles and load them on-demand. There are multiple ways ......
Read more >
3 ways to reduce webpack bundle size - Jakob Lind
You build your webpack app and see this WARNING in the console: You want to follow the recommendation and keep your bundle size...
Read more >
Possible ways to reduce your webpack bundle size - Medium
Here are some cool ways you can reduce your webpack bundle size: ...
Read more >
Tutorial | React.js and Spring Data REST
Spring Data REST provides a fast way to build hypermedia-powered repositories. ... You can also PUT , PATCH , and DELETE , as...
Read more >
7 tips how to minimalize size of your webpack bundle
The following text includes my tips and tricks on how to find the culprit and reduce the size of the webpacked bundle. Redundant...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found