Which one should we use? react-imported-component vs loadable-components

👨‍💻 Framework Development » Framework Design
1

@orballo could you please do this Which one should we use? between react-imported-component and loadable-components for our code splitting?

Something like this: Which one should we use? emotion vs styled-components

I’ve just discovered loadable-components and it looks great!

I’ve already done the size:

  • npx package-size @loadable/component --analyze: 15kb
  • npx package-size react-imported-component --analyze: 19kb
2

Ok, here we go!

react-imported-component

  • Documentation
    I find the documentation a bit chaotic, also it looks like the creator doesn’t speak English fluently and sometimes can be difficult to understand.
    There is one example for SSR but it doesn’t work out of the box however I think we can make it work.

  • Features
    I think it works a bit different compare to react-universal-component, which we are used to.
    To make SSR work, we need to run a “build” command to generate a file with all the import()s of the project. This would look something like "generate-imported-component": "imported-components app app/imported.ts" in our package.json. I really don’t fancy this.
    I find the API naming a bit confusing.

  • React Suspense
    Supported

  • Typescript
    Supported

  • Community
    GitHub Stars: 200
    NPM Downloads: 24,768
    Contributors: 6

  • Bundle size
    9 kB (https://bundlephobia.com/result?p=react-imported-component@5.5.1)

loadable-components

I will try both of them to better decide on what to use.

  • react-imported-component
  • loadable-components

0 voters

3

Uh, I don’t really like it either. We can’t do that.

BTW, @orballo I tried bundlephobia but I didn’t like it. Sometimes I got different results than using npx package-size xxx --analyze which I think is the most accurate one. Even npx package-size xxx (without --analyze) gave me weird results sometimes.

4

Try loadable-components only. I really dislike having to maintain a app/imported.js file. It complicates our extensibility.

5

Ok, I tried it without the --analyze options and returned the same results as bundlephobia. I used bundlephobia because it has info about the bundle.

Oki doki.

6

I think we can already declare a winner here, can we @orballo?

7

Yes, I think so :slight_smile:

8

Ok, loadable-components is the winner then :clap:

Edit: I’m studying it again.

9
10
11

loadable-components doesn’t work with HMR so I’m looking at react-imported-component again.

12

I was wrong, loadable-components works with HMR. There’s a confusion in that issue about naming: it does work with HMR but it does not work with RHL (react-hot-loader).

We’ve decided not to use RHL so everything is fine :+1:

13

Closing again :slight_smile:

14

Well, actually… there’s no need to close. Maybe someone wants to say something in the future.