Comments (11)
Cool, thanks for checking 😃 My wild guess is there's probably something changed in the internals of RN or any third party library. I will try to keep looking for the root cause of this meanwhile, to get this working on recent RN versions in release mode.
from react-native-bundle-visualizer.
@hurali97 Thanks for your hard work! Yeah they both run now with that patch.
With regards to the minification, does skipping that impact the bundle size that is being reported now? Or is release mode still a true release bundle size?
from react-native-bundle-visualizer.
Hi @frankcalise,
Thanks for the information. Could you please add your setup details for eg: react-native version and node version? Also if you could share package.json probably dependencies and dev deps only.
from react-native-bundle-visualizer.
hey @hurali97 sure thing!
Here is a reproducible repo (with the dep list below). It also did this for me on version 0.71.2
of react-native
. I tried both node version 16.14.2
and 18.11.0
. I think for this react-native version they suggest 18 but either run the app in this case.
https://github.com/frankcalise/react-native-vanilla-reanimated
"dependencies": {
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-masked-view/masked-view": "^0.2.8",
"@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.9",
"@shopify/flash-list": "1.4.0",
"react": "18.2.0",
"react-native": "0.71.1",
"react-native-reanimated": "2.14.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "3.19.0",
"react-native-svg": "^13.8.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.0.0",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.7",
"prettier": "^2.4.1",
"react-native-bundle-visualizer": "^3.1.2",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
from react-native-bundle-visualizer.
Hi @frankcalise, thanks for sharing this. I tried on react-native version 0.70.6 and below, it works fine. Seems there's something that's conflicting in later versions. I should see what's the cause of it.
from react-native-bundle-visualizer.
UPDATE
@frankcalise I cloned your provided repro and ran yarn visualizer:release
and I was able to repro it. However, when I ran yarn visualizer:dev
, output was shown in the html report.
See the last one, which is successful output with dev bundle.
If visualising dev bundle helps unblocking you, please go with that. As I don't have any timeline to get this working for release bundle. I will try to prioritise this. 🤝
from react-native-bundle-visualizer.
Ok I will try dev again, but I thought I had the same issue. Maybe I'll try with clearing the cache first. Are there any temp files I should clear?
Thanks for looking into it!
from react-native-bundle-visualizer.
You can try running the visualiser command with --reset-cache
flag.
from react-native-bundle-visualizer.
@hurali97 visualizer:dev script ran on 0.71.1
And also was able to run visualizer:release
when targeting 0.70.6 for ios/android platforms
from react-native-bundle-visualizer.
Hi @frankcalise,
I pushed a fix on another branch, you can try it by running following command:
yarn add -D https://github.com/IjzerenHein/react-native-bundle-visualizer.git#fix-set-minify-to-false
I tried to locate the source of issue in a couple of third party packages, including RN-CLI, React-Native and Metro. It turned out that recently metro has defaulted terser
as their minifier. Previously, it was uglify
which was playing nicely for our implemented solution to use source-map-explorer
, which then uses source-map
.
Now terser
as a minifier
for metro generates something which is probably unidentifiable for source-map
. So for now, I have disabled --minify
option that we can pass to RN-CLI for generating bundle and source map. With this, we can successfully visualise the source map on both dev and release. There's one downside to this approach and that's we will have artifacts generated without minification. But on a broader scale this shouldn't really matter.
For future, I will try to remove this more of a patch fix, and allow us using the minification. As I am not really much familiar with these minifier, transformers stuff, I can't promise a timeline for that, but I will try keep looking for ideas around it.
As of now, this fix/ patch should unblock us even on latest RN versions on both dev and release. Let me know, if this fix works for you. I will try to publish this fix soon. ✨
from react-native-bundle-visualizer.
Hi @frankcalise,
Yes it impacts the bundle size to some extent as lines, spaces, function names, variable names etc won't be minified due to this. Other than this, release level optimisations must be applied on the bundle. So if you visualize bundle with dev true and later on with dev false, you should see a green line in terminal which would say: "bundle size decreased by __".
from react-native-bundle-visualizer.
Related Issues (20)
- This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch().
- This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). HOT 1
- How to visualize with source-map-explorer ? HOT 2
- Source-map-explorer error HOT 37
- Bundle size does not reflect App Store size HOT 5
- Option to resolve path alias? HOT 5
- Running bundle visualizer in Expo project using Expo Router HOT 4
- Pass down source-map-explorer arguments. HOT 3
- Clarification: How the size is calculated
- Mapping whole computer HOT 2
- Pass existing bundle as argument HOT 7
- Cannot find module 'expo-asset/tools/hashAssetFiles' HOT 1
- Getting error command failed. HOT 7
- Unable to map error HOT 6
- Fails with collision warning on Expo 42 & AWS Amplify HOT 2
- Cannot read property `pipe` of undefined HOT 3
- Verbose gives size [object Object] HOT 1
- EXPO SDK 44: error Unable to resolve module ../../App from node_modules/expo/AppEntry.js:
- Nx compatible? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-bundle-visualizer.