esbuild & react-native-web - III: Performance
Tags: esbuid
Published: 2021-02-07 18:36:04

In the last two posts ([post I](https://dev.to/dalcib/esbuild-react-native-web-i-afn) and [post II](https://dev.to/dalcib/esbuild-react-native-web-ii-1bk3)) we demonstrated how to use **[esbuild](https://esbuild.github.io/)** with **[react-native-web](https://necolas.github.io/react-native-web)**, in a simple template and in a more complex project.
One of the main reasons for use Esbuild is performance. 
In this post, we will compare the Esbuild with Metro and Webpack via expo-cli.

### Metro
Developed by Facebook, [metro](https://facebook.github.io/metro/) is the standard bundler and transpiler for react-native.
We used the recipe of this [issue](https://github.com/necolas/react-native-web/issues/1257) to run Metro for the web.
In first post, the version of Metro was 0.58.0, and in the second post (GoolgeFit) the version was 0.56.4.
The command used to run Metro was:
`npx react-native.cmd bundle --platform web --dev false --entry-file node_modules/expo/AppEntry.js --bundle-output ./web-metro/bundle.js --assets-dest ./web-metro --config metro.config.js --minify true --sourcemap-output web-metro/bundle.js.map`
Here you can find the [metro.config.js](https://github.com/dalcib/rnw-esbuild/blob/master/metro.config.js).

### Webpack via expo-cli
The last versions of [expo](https://expo.io) are able to build web projects based on the react-native-web. Behind the scenes, expo-cli uses [Webpack](https://webpack.js.org/) to bundle and transpile web projects (for Android and iOS Expo uses Metro). 
On [this page](https://docs.expo.io/guides/running-in-the-browser/#adding-web-support-to-expo-projects) there is a guide on how to use Expo for web.
The expo-cli package version used to build to project was 3.28.4. This version comes with Webpak 4.43.0. 
The command used to build was:
`expo build:web --no-pwa` 
The option --no-pwa disables the generation of the files for Progressive Web Applications. It was disabled to be more in line with the behavior of Esbuild, which doesn't generate PWA out of box.
> Note: Using Webpack directly or with CRA without expo-cli, can give more accurate results about Webpack itself. 

### Esbuild
The version of Esbuid used in the tests was 0.8.21.
We tried both Esbuild CLI and the Javascript build API. 
As the results are almost the same, we are showing the results for the Esbuild CLI, based on the configurations presented in the posts.

## Results 

#### Post I
Basic create-react-native-app template in javascript.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uh37j4h4aop3tm73vcu5.png)

#### Post II
Clone of GoogleFit in typescript

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ypqdjn6o08n9w5cnkxna.png)

## Esbuild with react-native

Evan Bacon @evanbacon, from the Expo team, is playing with esbuild, react-native and expo:

{% twitter 1355380996472881152 %}

{% twitter 1355384234895044608 %}

These results were run against a fork of react-native that stripped flow and made other optimizations AOT.

## Conclusion

According to these results, Esbuild can perfornm 12 to 25 times faster than Expo and Metro.
Setting up a project to be bundled by Esbuild is extremely easier than Webpack, but performance is the number one feature that distinguishes Esbuild from the others.
The new Esbuild plugin API offers a lot of flexibility while maintaining simplicity.
So, there is no reason not to try Esbuild on your next react-native- web project.