Динамическая подгрузка компонентов REACT?

Question

[lexstile]

Можно ли так подгружать компонеты или лучше через React.lazy ?
Какие могут быть подводные камни у двнного подхода?

// @flow
import * as React from 'react';
import * as MovieLayouts from './Layouts';
import { Rating } from './constants';
import type { MovieType, RecommendationsType } from '../../types';
import styles from './Movie.less';

type MoviePropsType = {
  movie: MovieType,
  recommendation: RecommendationsType,
  layout: String,
};

const setColorBorder = (rating) => {
  switch (rating) {
    case Rating.GOLD: return styles.borderGold;
    case Rating.SILVER: return styles.borderSilver;
    default: return '';
  }
};

const initializeComponent = layout => MovieLayouts[`${layout}MovieLayout`];

export const Movie = (
  { movie, recommendation, layout } : MoviePropsType
) => {
  const rating = setColorBorder(recommendation && recommendation.rating);
  const MovieLayout = initializeComponent(layout);

  return (
    <MovieLayout
      movie={movie}
      rating={rating}
    />
  );
};

Answer 1

[Антон Спирин]

А где у вас тут подгрузка? Webpack просто сложит все, что есть в Layouts в бандл.
Советую подключить webpack-bundle-analizer для анализа содержимого бандла.

Comments

[lexstile]

В папке Layouts - 3 компонента, мне нужно, в зависимости от пропсов, выводить определенный один макет.
Здесь я выбираю компонент, которы показывать:
const MovieLayout = initializeComponent(layout);

[Антон Спирин]

lexstile, а причем тут вообще динамическая подгрузка? У вас в коде, если что, ее нет.

[lexstile]

Антон Спирин, имя компонента формируется динамически в зависимости от параметров, приходящих сверху

[Антон Спирин]

lexstile, и что это меняет? Все импортированные компоненты все равно попадают в bundle.

[lexstile]

Антон Спирин, а если использовать React.lazy - не попадут?

[Антон Спирин]

lexstile, нет. Ведь React.lazy используют с динамическим импортом.
Вам стоит поближе узнать как происходит сборка webpack.
Например если вы напишите в коде:
const locale = require(`./locales/${lang}.json`);
то webpack зайдет в папку locales и заберет оттуда все json файлы которые там будут и добавит их в бандл. =)

[lexstile]

Антон Спирин, благодарю за разъяснение :like