1--- 2title: Web performance 3description: Learn about recommended tools to optimize the web app when creating universal projects. 4--- 5 6import { Terminal } from '~/ui/components/Snippet'; 7 8Expo uses **react-native-web** which is the highly optimized framework used to power major websites and PWAs like [Twitter](https://mobile.twitter.com), [Major League Soccer](https://matchcenter.mlssoccer.com), [Flipkart](https://twitter.com/naqvitalha/status/969577892991549440), [Uber](https://www.youtube.com/watch?v=RV9rxrNIxnY), [The Times](https://github.com/newsuk/times-components), [DataCamp](https://www.datacamp.com/community/tech/porting-practice-to-web-part1). 9 10## Presets 11 12Many performance tools at your disposal will not only optimize your web app, but also improve the performance of your native app! Here is the officially recommended and most optimal set of tools to use when creating universal projects: 13 14- #### Babel 15 [`babel-preset-expo`](https://www.npmjs.com/package/babel-preset-expo) extends the default react-native preset and adds support for all other Expo platforms. In the browser this has massive performance benefits by enabling tree-shaking of the unused `react-native-web` modules. 16- #### Jest 17 [`jest-expo`](https://www.npmjs.com/package/jest-expo) A universal solution for testing your code against all of the platforms it runs on. Learn more about [Universal Testing](https://blog.expo.dev/testing-universal-react-native-apps-with-jest-and-expo-113b4bf9cc44). 18- #### webpack Config 19 [`@expo/webpack-config`](https://www.npmjs.com/package/@expo/webpack-config) A default webpack config that's optimized for running `react-native-web` apps and creating [progressive web apps](https://developers.google.com/web/progressive-web-apps/). 20 21## What makes my app large? 22 23To inspect bundle sizes, you can use a webpack plugin called [_Webpack Bundle Analyzer_](https://github.com/webpack-contrib/webpack-bundle-analyzer). This plugin will help you visualize the size of your static bundles. You can use this to identify unwanted large packages that you may not have bundled intentionally. 24 25### Using bundle analyzer 26 271. Install the bundle analyzer: 28 <Terminal cmd={['$ yarn add -D webpack-bundle-analyzer']} /> 292. Reveal the webpack config by running `npx expo customize webpack.config.js`. 303. Customize the config to generate a web report: 31 32```js 33const createExpoWebpackConfigAsync = require('@expo/webpack-config'); 34const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 35 36module.exports = async (env, argv) => { 37 const config = await createExpoWebpackConfigAsync(env, argv); 38 39 // Optionally you can enable the bundle size report. 40 // It's best to do this only with production builds because it will add noticeably more time to your builds and reloads. 41 if (env.mode === 'production') { 42 config.plugins.push( 43 new BundleAnalyzerPlugin({ 44 path: 'web-report', 45 }) 46 ); 47 } 48 49 return config; 50}; 51``` 52 53### Finding tree-shaking errors 54 55If you want to track down why a package was included, you can build your project in [debug mode](https://github.com/expo/expo-cli/blob/af9e390b74dcb7a0132e73b34ea0cdb9437a771c/packages/xdl/src/Web.ts#L69-L92). 56 57<Terminal cmd={['$ EXPO_WEB_DEBUG=true npx expo export:web']} /> 58 59> This will make your bundle much larger, and you shouldn't publish your project in this state. 60 61You can now search for unwanted packages by name and see which files or methods are preventing them from being tree-shaken. 62 63## Lighthouse 64 65Lighthouse is a great way to see how fast, accessible, and performant your website is. 66You can test your project with the _Audit_ tab in Chrome, or with the [**Lighthouse CLI**][lighthouse]. 67 68After creating a production build with `npx expo export:web` and serving it somewhere, run Lighthouse with the URL your site is hosted at. 69 70```sh 71lighthouse <url> --view 72``` 73 74[lighthouse]: https://github.com/GoogleChrome/lighthouse#using-the-node-cli 75[nic]: http://nicolasgallagher.com/ 76