javascript - 在浏览器中响应的加载时间更快?

标签 javascript reactjs

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

我想在浏览器中使用 react/jsx 并在不通过 webpack 或使用“create-react-app”引入构建步骤的情况下即时编译它。我发现这些事情对于我需要的来说是一个太多的过程。有时我只需要编写一个不需要多个 (html) 文件的快速小实用程序,我想将该文件放在静态服务器上。

下面的单文件示例有效,但不幸的是加载时间太慢了。也许有人找到了一种创造性的方式来缓存东西或使事情变得更快?也许第一次加载没有办法,但是第二次怎么样?也许中间服务器可以编译+缓存它,以便后续请求会更快。没有把握。或者也许有一个我不知道的超快 babel 可能比下面的更快?

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>

最佳答案

从评论中提取答案。

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

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

关于javascript - 在浏览器中响应的加载时间更快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51254359/

相关文章:

javascript - 我可以在函数级别设置 jshint 选项吗?

javascript - Node.js 删除 "mongodb"的查询

javascript - 为什么正确读取请求,服务器响应却错误?

javascript - 从 Javascript 调用 jar 中定义的 java 类

javascript - 有条件地使用三元运算符应用类

javascript - 在 underscorejs 模板中使用闭包

html - DIV 元素不显示滚动条 - ReactJS

javascript - axios 取消的请求无法重新启动

javascript - 无法从 Promise 的 then 函数设置状态

javascript - 如何导入包含函数的默认导出对象?