Javascript 在浏览器中更快地加载react？_Javascript_Reactjs

Javascript 在浏览器中更快地加载react？

javascript reactjs

Javascript 在浏览器中更快地加载react？,javascript,reactjs,Javascript,Reactjs,我正在浏览器中使用react。它工作正常，但速度不够快。初始加载在编译时花费的时间太长我希望在浏览器中使用react/jsx，并让它在运行中编译，而不通过webpack引入构建步骤或使用“createreact-app”。我发现这些东西对于我所需要的东西来说太复杂了。有时，我只需要编写一个快速的小实用程序，它不需要获取多个（html）文件，我想将这一个文件放到一个静态服务器上下面的单个文件示例可以工作，但不幸的是加载时间太慢。也许有人找到了一种创造性的方法来缓存东西或使事情更快？也许在第一次

我正在浏览器中使用react。它工作正常，但速度不够快。初始加载在编译时花费的时间太长

我希望在浏览器中使用react/jsx，并让它在运行中编译，而不通过webpack引入构建步骤或使用“createreact-app”。我发现这些东西对于我所需要的东西来说太复杂了。有时，我只需要编写一个快速的小实用程序，它不需要获取多个（html）文件，我想将这一个文件放到一个静态服务器上

下面的单个文件示例可以工作，但不幸的是加载时间太慢。也许有人找到了一种创造性的方法来缓存东西或使事情更快？也许在第一次加载时没有办法，但是第二次加载如何？也许中间服务器可以编译并缓存它，这样后续请求会更快。不确定。或者可能有一个超快速的巴别塔，我不知道它可以比下面的更快


你好，世界
ReactDOM.render(
你好，世界！，
document.getElementById（'root'））
);

从评论中提取答案

使用npx babel script.js--watch--out file script compiled.js编译文件并加载这些文件。您需要重新加载才能更新站点

您应该托管构建文件，而不是每次都使用babel读取JS。Babel可以输出传输文件以用于生产。然而，像webpack或parcel这样的捆绑包可以做更多的事情，比如缩小和丑陋。@SimeonSmith是的，我知道正确的方法是使用webpack，但我正在寻找一个黑客。我不想使用webpack。就像我提到的，babel可以创建传输文件。它将输出它们，这样巴贝尔就不必每次都解释它们。我正在寻找一个黑客--这将是非常困难的，特别是当你想在运行中进行编译时，它会在客户端导致速度损失。。。就像，每次。@froeyez是不是你觉得设置太多了？如果是这样的话，你可以尝试

createreact-app

来自动安装。我认为NPXBabel已经过时了。他们有一个叫巴贝尔cli的东西。但是你的想法很有趣。它仍然是一个服务器端编译，但比webpack要少很多。它可能适合单个文件。我的代码中没有太多依赖项。因此，我将进一步检查。@foreyez npx将在不全局安装babel cli的情况下使用。这是使用babel cli，这是直接从babel网站推荐的。使用npx，您可以将代码从一台计算机转移到另一台计算机，而无需在全球范围内安装任何npm软件包。这样，项目独立于全球npm包。

  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>

  </body>