Web Performance

Presets

• Babel

  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.

• Jest

  jest-expo A universal solution for testing your code against all of the platforms it runs on. Learn more about Universal Testing.

• webpack Config

  @expo/webpack-config A default webpack config that's optimized for running react-native-web apps and creating progressive web apps.

What Makes My App Large?

Using Bundle Analyzer

1. Install the bundle analyzer:
   Terminal

   Copy

   → 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

This will make your bundle much larger, and you shouldn't publish your project in this state.

Lighthouse

lighthouse <url> --view