Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Web Performance

Expo uses react-native-web which is the highly optimized framework used to power major websites and PWAs like Twitter, Major League Soccer, Flipkart, Uber, The Times, DataCamp.

Presets

There are a number of performance tools at your disposal that will not only optimize your web app, but also improve the performance of your native app! Here are the officially recommended and most optimal set of tools to use when creating universal projects:

What Makes My App Large?

To inspect bundle sizes, you can use a webpack plugin called 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.

Using Bundle Analyzer

  1. Install the bundle analyzer:
    Terminal
    → yarn add -D webpack-bundle-analyzer
  2. Reveal the webpack config by running npx expo customize webpack.config.js.
  3. Customize the config to generate a web report:
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = async (env, argv) => {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Optionally you can enable the bundle size report.
  // It's best to do this only with production builds because it will add noticeably more time to your builds and reloads.
  if (env.mode === 'production') {
    config.plugins.push(
      new BundleAnalyzerPlugin({
        path: 'web-report',
      })
    );
  }

  return config;
};

Finding Tree-Shaking Errors

If you want to track down why a package was included, you can build your project in debug mode.
Terminal
→ EXPO_WEB_DEBUG=true npx expo export:web
Info-icon
This will make your bundle much larger, and you shouldn't publish your project in this state.
You can now search for unwanted packages by name and see which files or methods are preventing them from being tree-shaken.

Lighthouse

Lighthouse is a great way to see how fast, accessible, and performant your website is. You can test your project with the Audit tab in Chrome, or with the Lighthouse CLI.
After creating a production build with npx expo export:web and serving it somewhere, run Lighthouse with the URL your site is hosted at.
lighthouse <url> --view
  • Message-iconAsk a question on the forums
  • Edit-iconEdit this page

Was this doc helpful?