Как динамически загрузить react модуль в приложение?

Question

[Алексей Чернышев]

Друзья, подскажите, каким образом можно динамически загружать react компоненты во время работы сайта.

Например у нас есть меню, и во время клика на один из разделов, подгружать js файл с компонентом react и инклюдить в приложение.

Это нужно для того, чтобы не грузить лишний js с компонентами, пока он не потребуется.

Answer 1

[Андрей Антропов]

Если для сборки приложения используется webpack томожно просто использовать конструкции require.ensure, System.import. Пак сам их обрабатывает и разрезает код на отдельные чанки. Как можно разделять отдельные роуты можно посмотреть например тут https://github.com/davezuko/react-redux-starter-ki...

Comments

[Алексей Чернышев]

Спасибо, буду пробовать!

[xtalen]

Нужно сделать компонент - обертку.

class Wrapper extends React.Component {
    static component = null;
    
    componentWillMount () {
        if (!Wrapper.component) {
            require.ensure(['./Component.react'], r => {
                Wrapper.component = r('./Component.react');
                this.setState({component: Wrapper.component});
            });
        } else {
            this.setState({component: Wrapper.component})
        }
    }
    
    render () {
        return this.state.component;
    }
}

[Алексей Чернышев]

Игорь Андреевич: Спасибо за пример! Я примерно так и представил :)

Answer 2

[Слава]

для webpack есть require.ensure