0

I have a component that pops up at different points in the application. In the popup component I have several child components grouped by their usage, these are already imported in, statically.

I then use a switch statement to render the different groups of components depending on a prop usage passed in.

This is working ok, but the switch statement (and imports) is growing.

Is their a way I could pass in the components at runtime and have them render. So that at any one time only one group of components is present/instanced in the popup ? Just trying to do away with the switch statement and the static imports

pseudo code

<renderPopup children={[ componentA, componentB ]} />

<renderPopup children={[ componentA, componentB, componentC ]} />

Is this something that Webpack could do ? But would prefer it to be code rather than config ?

The child components will have static imports etc.

Hope this makes sense.

Rory
  • 1,442
  • 4
  • 21
  • 38

2 Answers2

1

Yes, there is something called async code splitting in Webpack.

Here is the documentation: https://webpack.js.org/guides/code-splitting-async/#require-ensure-

Basically, you can tell Webpack to create a split point at some area, then use cleaver tricks to make those modules load only when required. Using routes make it easy since react-router already has dispositions for that, but it's not too hard to do so with a manifest and registry system.

gretro
  • 1,934
  • 15
  • 25
  • Thank you for answering, just need to get my head around this now :-) I've upped your answer – Rory May 16 '17 at 21:18
0

This seems to be what I should be doing

Dynamic System.import with webpack?

Webpacks System.import seems the answer but if there's another way please post

Community
  • 1
  • 1
Rory
  • 1,442
  • 4
  • 21
  • 38
  • 1
    Just to let you know, `System.import` is deprecated. They recommend using `import()` now. (https://webpack.js.org/guides/code-splitting-async/#system-import-is-deprecated) I still prefer `require.ensure` since it allows you to name your chunk. – gretro May 16 '17 at 20:54
  • @gretro You can name chunks in `import()`, it was added in version 2.4.0 https://github.com/webpack/webpack/releases/tag/v2.4.0 – Everettss May 17 '17 at 11:57
  • Oh, awesome. I'll take a look at it again. I preferred having a Promise, but this lack of functionality irritated me. – gretro May 17 '17 at 11:59