Optimize bundled size

I’m using styled-components, and am really happy with it. Currently I’m trying to get my app’s bundle size down, and styled-components is among one of the bigger packages. When bundled with webpack, it’s 90.6kB minified (just for styled-components, including some webpack overhead).

When compared with the 167kB for a minified bundle containing almost all my other vendor libs:

      'date-fns',
      'history',
      'load-script',
      'normalize.css',
      'normalizr',
      'react',
      'react-helmet',
      'react-dom',
      'react-medium-image-zoom',
      'react-redux',
      'react-router',
      'react-router-dom',
      'redux',
      'redux-thunk'

styled-components seems fairly heavy.

I still think it’s worth it, but I’m wondering whether there’s any known optimizations specific to styled-components for getting its bundled size down (outside of general stuff like gzipping, SSR, etc., which is of course not a styled-components specific issue). Any thoughts on this? Worth putting on the roadmap for a future version?

[k15a]

It’s definitely on the roadmap for v2. We have a new parser which is much smaller and @philpl is currently developing a new babel-plugin which will remove the need of a run time parser completely. You can try is out with npm install styled-components@next and https://github.com/styled-components/babel-plugin-styled-components.

[k15a]

IIRC Webpack Visualizer is reporting the bundle sizes before any plugin is executed so nothing is minified or deduplicated here. You might checkout https://github.com/th0r/webpack-bundle-analyzer which is a similar tool but more accurate.

As far as I know React isn’t bundled with styled-components so there shouldn’t be any duplicate React code here.