如何动态包含 React jsx 文件而不是与 react-router 一起使用？

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 文件本质上是视图，因此让用户下载所有视图只查看一个视图似乎与我所知道的一切背道而驰。

我浏览了网上的示例，但只能看到包含 100 个组件的巨大文件...

Answer 1

不确定这是否正是您要查找的内容，但最佳做法是将您的资源（文件）组合在一起，以消除对大量小文件的无关 HTTP 请求。这里有一个平衡点（一个 5mb 的 js 文件可能应该被分解成更小的文件），像 webpack 这样的工具可以帮助你管理这个。

您是否有需要分解它们的特定用例？

如何动态包含 React jsx 文件而不是与 react-router 一起使用？

How to include React jsx files on the fly instead of all in one go with the react-router?

javascript

reactjs

react-router