@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
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
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.
Try loadable-components
only. I really dislike having to maintain a app/imported.js
file. It complicates our extensibility.
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.
I think we can already declare a winner here, can we @orballo?
Ok, loadable-components is the winner then
Edit: I’m studying it again.
loadable-components
doesn’t work with HMR so I’m looking at react-imported-component
again.
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
Well, actually… there’s no need to close. Maybe someone wants to say something in the future.