3. ousenui.js is loaded whole even for a single component

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ousenui.js is loaded whole even for a single component


  • I just installed lib with intention to use it with React. After importing one component (Switch) I noticed bundle size increased by about 300kb and I see some big file onsenui.js got loaded.
    Is this how this lib works, it loads whole onsenui.js even if I want to use single component?

    0
  • E
    administrators

    If you are using a tool like Webpack or Rollup then it is possible to only import the components you need.

    See here for full details: https://onsen.io/v2/guide/appsize.html

    0

  • @emccorson Thank you very much for response. I am using Webpack. I have seen that part in docs it, but I am not clear how to import Switch component (for example) for react that way. What would code look like?

    import Switch from 'onsenui/esm/elements/ons-switch'; ???

    One more question is there a way not to import all components css? Because I think this:

    import 'onsenui/css/onsenui-core.css';
    import 'onsenui/css/onsen-css-components.css';

    is importing css for all components.

    0
  • E
    administrators

    Oh sorry, I hadn’t read those docs properly myself. It looks like ES modules are only set up for using Onsen UI with plain JS, not with the frameworks like React.

    Let me look into why that is and I’ll get back to you.

    As far as I know, you do have to import the CSS for all components, but I’ll also double-check that while I’m looking into the modules stuff.

    0