Giter Site home page Giter Site logo

Comments (11)

hurali97 avatar hurali97 commented on May 3, 2024 2

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.

frankcalise avatar frankcalise commented on May 3, 2024 1

@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.

hurali97 avatar hurali97 commented on May 3, 2024

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.

frankcalise avatar frankcalise commented on May 3, 2024

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.

hurali97 avatar hurali97 commented on May 3, 2024

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.

hurali97 avatar hurali97 commented on May 3, 2024

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.

Screenshot 2023-02-11 at 9 56 09 PM

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.

frankcalise avatar frankcalise commented on May 3, 2024

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.

hurali97 avatar hurali97 commented on May 3, 2024

You can try running the visualiser command with --reset-cache flag.

from react-native-bundle-visualizer.

frankcalise avatar frankcalise commented on May 3, 2024

@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.

hurali97 avatar hurali97 commented on May 3, 2024

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.

hurali97 avatar hurali97 commented on May 3, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.