Как включить React JSX файлы на лету, а не все в один раз с React-маршрутизатором?

Question

// This is straight from the overview.md in the react-router docs
var Router = ReactRouter;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var App = React.createClass({
    render: function () {
        return (
        <div>
            <header>
                <ul>
                    <li><Link to="inbox">Inbox</Link></li>
                    <li><Link to="calendar">Calendar</Link></li>
                </ul>
            </header>

            {/* this is the important part */}
            <RouteHandler/>
        </div>
        );
    }
});

var Inbox = React.createClass({
    render: function () {
        return (
            <div>
                This is the inbox
            </div>
        );
    }
});

var Calendar = React.createClass({
    render: function(){
        return (
            <div>
                This is the calendar
            </div>
        );
    }
});

var routes = (
    <Route name="app" path="/wish/" handler={App} >
        <Route name="inbox" handler={Inbox}/>
        <Route name="calendar" handler={Calendar}/>
        <DefaultRoute handler={Inbox}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
    React.render(
        <Handler/>,
        document.querySelector('#content')
    );
});

Выше приведена очень простая страница, на которой показан компонент "Входящие", когда пользователь переходит на него, и компонент "Календарь" при переходе к... однако в действительности страницы, скорее всего, будут содержать несколько компонентов, множество и много jsx-кода.

Как лучше разбивать все различные компоненты и загружать соответствующие файлы только тогда, когда это необходимо, т.е. в приведенном выше простом примере загружать код для входящих сообщений можно только тогда, когда пользователь его запрашивает (и для календаря и т. Д.? Как JSX По сути, файлы - это представления, и кажется, что это идет вразрез со всем, что я знаю, когда пользователь загружает все представления, чтобы просматривать только одно.

Я просматривал примеры в сети, но мог видеть только гигантские файлы из сотен компонентов...

Answer 1

Не уверен, что это именно то, что вы ищете, но лучше всего объединить ваши ресурсы (файлы) вместе, чтобы исключить посторонние HTTP-запросы для большого количества маленьких файлов. Здесь есть баланс (один 5-мегабайтный js-файл, вероятно, следует разбить на более мелкие файлы), и такие инструменты, как webpack, помогут вам в этом.

У вас есть конкретный вариант использования, который требует их разбить?