Semantic-ui-react: reduce size of this library

[acornejo]

Including this project (without any css) adds ~230k of minified javascript to the build.

This is a lot!!

For comparison, react + react-dom + redux + react-redux + reselect are only ~150k of minified javascript together with all their dependencies and polyfills (promise, core-js, etc).

170kb of this are in this library, and 60kb are in lodash which seems to be a dependency of this library.

[layershifter]

https://stackoverflow.com/a/43288212/6488546
https://react.semantic-ui.com/usage#bundlers

Unused components should be also dropped from your custom CSS build:
https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf

[acornejo]

1) NODE_ENV is in production
2) I use webpack 2
3) I already minify and remove unused components
4) I wa building without css

The one thing there I wasn;'t doing is doing the lodash + babel trick, but that still leaves this library as 170kb which is larger than react + react-dom + redux + react-redux + reselect all put together.

FWIW I reproduced this using a small project created through create-react-app and then running the production build, so I don't think this issue is specific to my setup.

[layershifter]

I've recently pushed our webpack 2 example and run analyze.

Minimal build with component picking

• semantic-ui-react - 17.41 KB gzipped
• lodash - 17.39 KB gzipped
• react-dom - 33.76 KB gzipped

Full build without component picking

• semantic-ui-react - 40.27 KB gzipped
• lodash - 17.39 KB gzipped
• react-dom - 33.76 KB gzipped

I don't see something awful there. Full build of semantic-ui-react with lodash is less than 60 KB :unamused:

[levithomason]

IMHO, size optimizations are blown way out of proportion. Even on mobile devices, the average internet connection is +20Mb down.

Even a 200 KB payload on any connection >1Mb down is subsecond delivery, let alone +20Mb down:

http://www.download-time.com/

[tdewolff]

@levithomason This is not true, the limit is around 150kB. See https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

[brianespinosa]

@tdewolff final builds gzipped still come in under 60k though. That's still less than the 150k limit you're noting.

[vrmontes]

I am using create-react-app with "semantic-ui-css and "semantic-ui-react":
To avoid ejecting i used "react-app-rewired" with "babel-plugin-transform-semantic-ui-react-imports"

Used this in config-overrides.js

```const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
config = injectBabelPlugin(['transform-semantic-ui-react-imports',
{
"convertMemberImports": true,
"importType": "es",
"addCssImports": true,
"importMinifiedCssFiles": true,
"addLessImports": false,
"addDuplicateStyleImports": false
}], config);

return config;
};

Then in my index.js

/* Global semantic-ui */
import 'semantic-ui-css/components/reset.min.css';
import 'semantic-ui-css/components/site.min.css';

/* Manually import additional css needed for components like Dropdown semantic-ui */
import 'semantic-ui-css/components/transition.min.css';
import 'semantic-ui-css/components/menu.min.css';
```

[levithomason]

Performance is important and delivery is part of that. We've implemented much in the way of performance. We welcome any PR to improve things even further.