Add Next.js example to check bundle size on web #3650
Conversation
| "raf": "^3.4.1", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "react-native-reanimated": "3.0.0-rc.3", |
There was a problem hiding this comment.
Is there any option to use link:../ here so we can have fast refresh when we edit package files? cc @nandorojo
There was a problem hiding this comment.
an easier method is probably to un-comment the webpack config resolver in next.config.js and point it to the right place. but link might also work. i assume this is using yarn link? i don’t think i’ve tried this before
There was a problem hiding this comment.
Does this approach support fast-refresh also when changing Reanimated codebase, e.g. src/reanimated2/core.ts?
| - main | ||
|
|
||
| env: | ||
| MAX_SIZE_KB: 30 |
There was a problem hiding this comment.
The plan is that we will increase this value accordingly if needed.
plugin.js
Outdated
| @@ -282,11 +282,19 @@ function isRelease() { | |||
| return process.env.BABEL_ENV === 'release'; | |||
| } | |||
|
|
|||
| function isProduction() { | |||
| return process.env.NODE_ENV === 'production'; // for web | |||
There was a problem hiding this comment.
Is there any better way to detect production build for web? cc @nandorojo
There was a problem hiding this comment.
that said, should these source maps still get generated for web, even in dev mode?
There was a problem hiding this comment.
Indeed, they don't need to be generated even in dev mode.
Here's a screenshot of debugger stopping on a breakpoint in a worklet without sourcemaps (there's no sourceMappingURL in _f.asString):
Q: Is there any way to check if Babel transpiles for web or for React Native?
| @@ -0,0 +1,9 @@ | |||
| module.exports = { | |||
There was a problem hiding this comment.
I wonder if we should use the reanimated SWC plug-in instead of Babel? Or perhaps do a run with and a run without it, using an env variable?
For reference: https://github.com/showtime-xyz/showtime-frontend/blob/staging/apps/next/next.config.js#L91-L99
This isn’t a requirement for this PR, but would be useful for testing.
There was a problem hiding this comment.
Good idea, we can test the SWC plugin as well once it's merged (in a separate PR).
| ignoreDuringBuilds: true, | ||
| }, | ||
| webpack(config, _options) { | ||
| // config.resolve.alias = { |
There was a problem hiding this comment.
I think you could make this point to the locally-built folder.
|
Hey, just checking on the status of this PR :) |
|
@bartlomiejbloniarz works on the new version of this test. |
Description
This PR adds NextExample app (based on https://github.com/nandorojo/reanimated-tree-shaking from @nandorojo) which can be used to check Reanimated bundle size as well as its tree-shaking capabilities when used on web (specifically, in Next.js project).
The motivation behind this PR is a significant increase (~10x) of bundle size on web when using Reanimated 3.0.0-rc.3 compared to 3.0.0-rc.2 caused by Babel plugin appending worklets with sourcemaps as comments for debugging worklet runtime with Flipper which is not necessary on web.
* - Animated.View, useSharedValue, useAnimatedStyle, withTiming, withRepeat
TODO:
"react-native-reanimated": "link:../"instead of3.0.0-rc.3to make local development easier