Question

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

我想在浏览器中使用react / jsx并即时对其进行编译，而无需通过webpack或使用“ create-react-app”引入构建步骤。我发现这些东西对于我需要的东西来说太过分了。有时，我只需要编写一个快速的小实用程序，它不需要占用多个（html）文件，而我想将该一个文件扔到静态服务器上。

下面的单文件示例有效，但不幸的是加载时间太慢。也许有人找到了一种创造性的方式来缓存或使事情更快？也许第一次加载没有办法，但是第二次加载呢？也许中间服务器可以对其进行编译+缓存，以便后续请求会更快。不确定。或者也许有一个我不知道的超快通天塔，它可能比下面的工作更快？

https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

  <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>

Answer 1

从评论中拉出答案。

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

https://babeljs.io/docs/en/babel-cli.html#compile-files

在浏览器中反应更快的加载时间？

1 个答案: