title: How to make cherry picking react component library like lodash & date/fns
body: <p>I have made one small library which includes 20-25 different components &amp; made an npm package of it.</p>
  
  <p>my react project, where I want to use these components, has many pages[routes] used lazy-loading so each page has its own bundle.</p>
  
  <p>but when I write the statement on my home page[App.js].</p>
  
  <pre><code>    import { MyModal } from 'my-react-lib';
  </code></pre>
  
  <p>each and every component is loaded into home page bundle. so my initial loading performance is worst. [2Mb initial bundle size]</p>
  
  <p>I have read the concept of tree shaking and event tried to implement in webpack &amp; even with rollup but they only make bundle.js but not as per mine requirement.</p>
  
  <p>I am willing to achieve cherry-picking like import-export. same as date-fns &amp; lodash does.</p>
  
  <pre><code>      import format from 'date-fns/format';
        import debounce from 'lodash/debounce';
  </code></pre>
  
  <p>how to achieve this?</p>
  
  <pre><code>   import MyModal from 'my-react-lib/MyModal';
     import OtherComponent from 'my-react-lib/OtherComponent';
  </code></pre>