4

我正在探索reactjsloginform.js ，但我很惊讶地看到这个对外部 JSX 模板（ ）的双重网络请求。

在哪里

索引.html

<html>
<head>
    <title>Awan Demo</title>
</head>
<body>

Hello Sir!

<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx" src="loginform.js"></script>

</body>
</html>

和 loginform.js

/** @jsx React.DOM */
    var LoginForm = React.createClass({
        render: function(){
            return <form id="f_loginform" method="POST">
                    UserName:<input type="text"/>
                    Password:<input type="password"/>
                </form>;
        }
    });
    React.renderComponent(<LoginForm/>, document.body);

有什么办法可以避免这个双重请求？

详情请参考附图：

使用 Chrome-v30 的屏幕截图

4

1 回答 1

5

对我来说，为什么 Chrome 在看到 script 标签时坚持要获取脚本对我来说并不明显<script type="text/jsx" src="loginform.js"></script>。我希望它完全跳过请求，因为它无法识别type.

但是，浏览器内的 JSX 转换器并不是为提高效率而设计的，当您关心速度时，应该在生产环境中避免使用（并且您应该会在控制台中看到有关此效果的警告）。相反，在打包和缩小 JS 时，您应该将 JSX 文件预编译为原始 JS，这些原始 JS 可以像任何其他 JS 代码一样被包含在内。有关更多信息，请参阅React 站点上的生产化：预编译 JSX 。

于 2013-11-14T08:18:53.553 回答