CODEWITHSUNDEEP
javascriptreactjs
Shai UI
Shai UI

Reputation: 51928

Faster loading time for react in the browser?

I'm using react in the browser. It works fine, but it's not fast enough. The initial load takes too much time while it compiles.

I'd like to use react/jsx in the browser and have it compile on the fly without introducing a build step via webpack or using "create-react-app". I find these things to be too much of a process for what I need. Sometimes I just need to write a quick little utility that doesn't need to take more than one (html) file and I'd like to to throw that one file on a static server.

The single-file-example below works but unfortunately the loading time is just too slow. Maybe someone found a creative way to cache things or make things faster? Maybe there's no way around the first time it loads, but how about the second time etc? maybe an intermediary server can compile+cache it, so that subsequent requests would be faster. not sure. Or maybe there's a super fast babel that I'm not aware of that could just work faster than the below?

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/[email protected]/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>

Upvotes: 1

Views: 2107

Answers (1)

Simeon Smith
Simeon Smith

Reputation: 116

Pulling answer from comments.

Use npx babel script.js --watch --out-file script-compiled.js to compile your files and load those files. You will be required to reload to update the site.

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

Upvotes: 1

Related Questions