Faster loading time for react in the browser?

Question

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>

You should be hosting build files, not using babel to read your JS every time. Babel can output transpiled files to use in production. However, bundlers like webpack or parcel can do more things like minification and uglification. — Simeon Smith
– Simeon Smith, Commented Jul 9, 2018 at 21:39
@SimeonSmith yes I know the correct way to do this would be with webpack, but I'm looking for a hack. I don't want to use webpack. — Shai UI
– Shai UI, Commented Jul 9, 2018 at 21:40
Like I mentioned, babel can create the transpiled files. It will output them so babel does not have to interpret them every time. babeljs.io/docs/en/babel-cli.html#compile-files — Simeon Smith
– Simeon Smith, Commented Jul 9, 2018 at 21:41
I'm looking for a hack -- this will be really difficult, especially as you want to do compilation on the fly, it will incur speed loss on client side... like, evertime. — Bagus Tesa
– Bagus Tesa, Commented Jul 9, 2018 at 21:42
@froeyez Is it the setup that you feel is "too much"? If so, you could always try create-react-app to automate setup. — NoxelNyx
– NoxelNyx, Commented Jul 9, 2018 at 22:07

Simeon Smith · Accepted Answer · 2018-07-09 22:20:11Z

1

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

answered Jul 9, 2018 at 22:20

Simeon Smith

1167 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shai UI Over a year ago

I think npx babel is outdated. they have this thing called babel-cli. but your idea is interesting. it's still a server-side compilation but it's alot less than webpack. it might be good for single files. I don't have alot of dependencies in my code. so I will check this out further.

Simeon Smith Over a year ago

@foreyez npx would be used if you don't install babel-cli globally. That is using the babel-cli and is the recommendation straight from babel's site.

Simeon Smith Over a year ago

Using npx allows you to take your code from one computer to another without having to install any npm packages globally. This way the project is independent of global npm packages.

Collectives™ on Stack Overflow

Faster loading time for react in the browser?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related