A Next.js playground to test Reanimated bundle size.

Related tags

Learning resource reanimated-tree-shaking
Overview

React Native Reanimated Tree Shaking Playground

Here we can test react-native-reanimated's bundle size.

  • ๐ŸŽ™ Discussion here
  • ๐Ÿ—บ Progress here

Instructions

  1. git clone https://github.com/nandorojo/reanimated-tree-shaking.git

  2. yarn

  3. yarn dev to view the website locally on localhost:3000

  4. yarn analyze to view the bundle size results (it will open automatically in your browser).

    a. Be sure to look in the logs in your terminal to see page sizes too.

  5. Open lib/react-native-reanimated and edit the src folder to see changes, and keep building.

How I created this repo

  1. npx create-next-app --example with-react-native-web rea-tree
  2. cd rea-tree
  3. yarn add react-native-reanimated @expo/next-adapter
  4. yarn add -D @next/bundle-analyzer next-transpile-modules
  5. Configure next.config.js and babel.config.js by following the Solito's starter configuration.
  6. Add pages/reanimated.js
  • Clone pages/index.js, use Animated.View instead of View
  1. Copy node_modules/react-native-reanimated -> lib/react-native-reanimated
  • Removed all native code from Common, ios and android folders since these aren't used on Web
  1. Alias imports from react-native-reanimated -> lib/react-native-reanimated/src/Animated.js in next.config.js so that we can debug more easily, since node_modules are cached and compiled.
You might also like...

A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

My To-Do List A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I imp

Nov 11, 2022

Multi-platform node package bundle to a package.json.

dmpc Multi-platform node package bundle to a package.json. install ### npm mode npm i -g @kingsword/dmpc ### yarn mode yarn global add @kingsword/dmp

Oct 16, 2022

Vite plugin to client bundle i18next locales composited from one to many json/yaml files from one to many libraries. Zero config HMR support included.

vite-plugin-i18next-loader yarn add -D vite-plugin-i18next-loader Vite plugin to client bundle i18next locales composited from one to many json/yaml f

Nov 30, 2022

โšก Extremely fast online playground for every programming language.

Riju Riju is a very fast online playground for every programming language. In less than a second, you can start playing with a Python interpreter or c

Dec 28, 2022

Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

React package boilerplate by HackingBay Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterpri

Jan 19, 2022

A simple code playground

CodeeBox A simple code playground ๐Ÿ˜ Features: Instant change preview Saving without accounts or databases, everything's on the URL (Encoded) Resizabl

Nov 17, 2022

Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Code Playground About Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript cod

Dec 17, 2022

TypeScript playground plugin to save on format

TypeScript Playground Plugin TypeScript Playground plugin to save on format Running this plugin Click this link to install or Open up the TypeScript P

Apr 11, 2022

An ergonomic, mobile-first, Prolog playground!

An ergonomic, mobile-first, Prolog playground!

Paรญzo Programmer Pronounced "Pay-zo Programmer". https://lf94.github.io/paizo-programmer/ Paizo is a playground for programmers. It's intended to be u

Aug 13, 2022
Comments
  • Results

    Results

    Screen Shot 2022-05-12 at 9 40 54 AM

    Here are the preliminary results for an empty page. Compare / to /reanimated. They are both identical, but Reanimated has 80kb greater.

    Some questions to answer:

    1. Is this because Reanimated itself is 80 kb? Or, is it because Reanimated is importing all of react-native-web, breaking its babel plugin that tree shakes imports from react-native directly?

    a. If it is indeed breaking because it's importing all of RNW, this is an easy solution. We just need to split the createAnimatedComponent calls of Text, View, etc. into their own files. See Dripsy for an example.

    1. What does adding sideEffects: true to Reanimated change?
    opened by nandorojo 17
Owner
Fernando Rojo
CTO @ BeatGig. Y Combinator W'19. Founder @ PATOS. UPenn.
Fernando Rojo
GitHub
A github action that provides detailed bundle analysis on PRs for next.js apps

Next.js Bundle Analysis Github Action Analyzes each PR's impact on your next.js app's bundle size and displays it using a comment. Optionally supports

HashiCorp 369 Dec 27, 2022
Dynamic components with the power of next-gen bundle tools

Moon island architecture example Dynamic components with the power of next-gen bundle tools What is this? This example shows you how the moon-island a

idler 8 Oct 21, 2022
Jester is a test-generation tool to create integration test code.

Code Generator for Integration Tests Introduction Welcome to Jester: An easy-to-use web application that helps you create and implement integration te

OSLabs Beta 54 Dec 12, 2022
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

Daniel Yerimah 6 Jun 7, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Upload or Upload & Publish your bundle (apk or aab) to Huawei AppGallery with ConnectApi

appgallery-publisher Upload/Publish your bundle (apk or aab) to AppGallery automatically with appgallery-publisher Usage Single Javascript File Bash F

Mustafa YiฤŸit 17 Sep 19, 2022
๐ŸŠPutout bundle to get things working in Deno and Browsers

@putout/bundle ?? Putout bundle to get things working in Deno and Browsers using amazing esm.sh. Usage import putout from 'https://esm.sh/@putout/bund

Putout code transformer 3 Jun 29, 2022
To Do list app. Very useful to keep track of daily activities. Made with โค๏ธ, JavaScript and bundle with Webpack

To Do List โš™๏ธ This is a To Do list App to practice Javascript and Webpack deployment. Live Demo โš™๏ธ GitHub Pages: DEMO Tech โŒ˜โ‡ง HTML & CSS best practice

Raul Ospina 11 Oct 17, 2022
In this project, I built a simple HTML list of To-Do tasks. Using webpack to bundle JS functionality and other sources.

To-do-list App A simple To-do-list app using DOM manipulation. Built With HTML/CSS JavaScript Webpack Jest Live Demo Live Demo Getting Started Get a c

Andy Menutti 10 Nov 5, 2022