{"action":"closed","issue":{"url":"https://api.github.com/repos/jxnblk/rmdi/issues/1","repository_url":"https://api.github.com/repos/jxnblk/rmdi","labels_url":"https://api.github.com/repos/jxnblk/rmdi/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/jxnblk/rmdi/issues/1/comments","events_url":"https://api.github.com/repos/jxnblk/rmdi/issues/1/events","html_url":"https://github.com/jxnblk/rmdi/issues/1","id":321496719,"number":1,"title":"Tree-shaking not possible","user":{"login":"Andarist","id":9800850,"avatar_url":"https://avatars2.githubusercontent.com/u/9800850?v=4","gravatar_id":"","url":"https://api.github.com/users/Andarist","html_url":"https://github.com/Andarist","followers_url":"https://api.github.com/users/Andarist/followers","following_url":"https://api.github.com/users/Andarist/following{/other_user}","gists_url":"https://api.github.com/users/Andarist/gists{/gist_id}","starred_url":"https://api.github.com/users/Andarist/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Andarist/subscriptions","organizations_url":"https://api.github.com/users/Andarist/orgs","repos_url":"https://api.github.com/users/Andarist/repos","events_url":"https://api.github.com/users/Andarist/events{/privacy}","received_events_url":"https://api.github.com/users/Andarist/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-05-09T09:28:57Z","updated_at":"2018-05-09T12:17:57Z","closed_at":"2018-05-09T12:17:57Z","author_association":"NONE","body":"By reading:\r\n> // import icons individually for better tree-shaking\r\n\r\nI assume you care about tree-shaking. Based on that I'd like to report serious problems with this library's structure that prevents tree-shaking **completely**.\r\n\r\nLet's examine what happens when we bundle a simple file:\r\n```js\r\nimport { Accessibility } from 'rmdi'\r\nconsole.log(Accessibility)\r\n``` \r\n\r\nwith following config:\r\n```js\r\nconst webpack = require('webpack');\r\nconst path = require('path');\r\n\r\nmodule.exports = {\r\n  mode: 'production',\r\n  entry: './src/index.js',\r\n  output: {\r\n    path: path.resolve(__dirname, \"dist\"),\r\n    filename: './index-rmdi.js',\r\n  },\r\n  externals: {\r\n    react:'react',\r\n    'react-dom':'reactDom',\r\n    'styled-system':'styledSystem',\r\n    'styled-components':'styledComponents',\r\n  },\r\n}\r\n```\r\nWe can see by inspecting the output file that nothing really got removed (tree-shaken) out of the bundle and it weighs **100kb** minified & gzipped:\r\n```sh\r\n> gzip -c dist/index-rmdi.js | wc -c\r\n102580\r\n```\r\n\r\nThere are several things that could improve the situation:\r\n- providing a \"module\" field in package.json that would point to files written using ESM module syntax\r\n- providing `sideEffects: false` in package.json that would ensure webpack it can tree-shake your reexporting `index.js` file (but that's beneficial only for webpack@4 users)\r\n- using `babel-plugin-styled-components` that would add `#__PURE__` annotations to `styled` calls ensuring UglifyJS that unused outputs can be removed safely\r\n- using rollup to dedupe common dependencies with its `experimentalCodeSplitting` feature - atm EACH file duplicates babel helpers such as `_extends` & `_objectWithoutProperties` and you have 970~ files (icon components) here\r\n- there is also problem of static property assignments described by me [here](https://github.com/bvaughn/react-virtualized/issues/889). Solutions for this are somewhat not ideal - either produce each component with IIFE that would contain those static assignments (`.defaultProps`, `.displayName`) and annotate those IIFEs with `#__PURE__` OR ditch `.defaultProps` in favor of default parameters and wrap `.displayName` assignments with env check that would strip them down in production bundles."}}
{"actor":{"display_login":"jxnblk"}}