Web Performance
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:
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-expo
A universal solution for testing your code against all of the platforms it runs on. Learn more about Universal Testing.@expo/webpack-config
A default Webpack config that's optimized for running react-native-web
apps and creating progressive web apps.
The easiest and most
highly recommended way to improve you project is to optimize your assets. You can reduce the size of your assets with the
Expo Optimize CLI.
Terminal
# Make sure you can successfully install the native image editing library Sharp
→
npm install -g sharp-cli
# Then in your project run:
→
npx expo-optimize
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.
- Install the bundle analyzer:
→
yarn add -D webpack-bundle-analyzer
- Reveal the Webpack Config:
- Run
expo customize:web
and select webpack.config.js.
- 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);
if (env.mode === 'production') {
config.plugins.push(
new BundleAnalyzerPlugin({
path: 'web-report',
})
);
}
return config;
};
If you want to track down why a package was included, you can build your project in
debug mode.
→
EXPO_WEB_DEBUG=true expo build:web
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 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 expo build:web
and serving it somewhere, run Lighthouse with the URL your site is hosted at.
lighthouse <url> --view