← Back to All Articles
How We Compiled React Native for Web into a Sub-100 KB Production Bundle on Vite
Category: Software Engineering • Published: 2026-08-23 • By Muhammad Ali
When building **rmaa.pk**, our goal was to combine the native UI feel of mobile apps (smooth touch response, elastic gestures, responsive primitives) with the instant loading speed of modern static websites.
### The React Native Web Vite Bridge
In our `vite.config.ts`, we map all `react-native` imports directly to `react-native-web`:
```typescript
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'react-native': 'react-native-web',
},
extensions: ['.web.tsx', '.tsx', '.web.ts', '.ts', '.web.js', '.js'],
},
});
```
### Eliminating Bloat Through Dead-Code Elimination
Standard React Native Web builds bundled with Webpack often exceed 400 KB gzipped because unused primitives (like `Modal`, `Picker`, or complex gesture responders) are dragged into the build.
With Vite 5 and Rollup ES module tree-shaking:
1. We author exclusively with fundamental primitives: `View`, `Text`, `Pressable`, `ScrollView`, and `StyleSheet`.
2. All style rules are compiled at build time into minimal atomic CSS classes, eliminating runtime style calculation overhead.
3. Total production JavaScript bundle size: **97.90 KB gzipped**.
4. First Contentful Paint (FCP): **$0.3\text{ seconds}$**.
5. Google Lighthouse Core Web Vitals Score: **100/100 across Performance, SEO, and Accessibility**.