feat: [#176479978] Add react native bundle visualizer as dev dependency

[fabriziofff]

Short description

This pr adds react native bundle visualizer in order to measure the size of the bundle.

List of changes proposed in this pull request

• Added "react-native-bundle-visualizer": "^2.2.1" ad devDependency

How to test

• Run yarn run react-native-bundle-visualizer in order to see the size distribution

[pagopa-github-bot]

Affected stories

• 🌟 #176479978: Come DEV voglio misurare la size del bundle react-native

New dependencies added: react-native-bundle-visualizer.

react-native-bundle-visualizer

Author: IjzerenHein

Description: See what's inside your react-native bundle

Homepage: https://github.com/IjzerenHein/react-native-bundle-visualizer#readme

Created	over 3 years ago
Last Updated	6 months ago
License	MIT
Maintainers	1
Releases	24
Direct Dependencies	@expo/metro-config, chalk, execa, minimist, open, rimraf and source-map-explorer
Keywords	react-native-bundle-visualizer, react native bundle size, react-native, react native, bundle, visualizer, size and bundle-size

README

react-native-bundle-visualizer

See what's inside of your react-native bundle 📦

Uses the awesome source-map-explorer to visualize the output of the Metro bundler.

Purpose

Sometimes, importing a single javascript library can drastically increase your bundle size. This package helps you to identify such a library, so you can keep the bundle size low and loading times fast.

Usage

Make sure npx is installed and run the following command in your project root

npx react-native-bundle-visualizer

And when using Expo:

npx react-native-bundle-visualizer --expo managed

Or install as a dev-dependency

yarn add --dev react-native-bundle-visualizer

And run it:

yarn run react-native-bundle-visualizer

or when using npm:

npm install --save-dev react-native-bundle-visualizer
./node_modules/.bin/react-native-bundle-visualizer

Command line arguments

All command-line arguments are optional. By default a production build will be created for the ios platform.

Option	Description	Example
platform	Platform to build (default is ios)	--platform android
expo	Expo target, managed or bare. This ensures that the project is bundled with expo settings and that .expo file extensions are handled appropriately.	--expo bare
dev	Dev or production build (default is false)	--dev false
entry-file	Entry-file (when omitted tries to auto-resolve it)	--entry-file ./index.android.js
bundle-output	Output bundle-file (default is tmp)	--bundle-output ./myapp.bundle
format	Output format html, json or tsv (default is html) (see source-map-explorer options)	--format json
only-mapped	Exclude "unmapped" bytes from the output (default is false). This will result in total counts less than the file size.	--only-mapped
verbose	Dumps additional output to the console (default is false)	--verbose
reset-cache	Removes cached react-native files (default is false)	--reset-cache

Usage with older react-native versions and the Haul bundler

As of react-native-bundle-visualizer version 2.x, the direct output of the Metro bundler is visualized using the source-map-explorer.

Prior to version 2, the Haul bundler was used which used Webpack. If you are having problems visualizing the output for older react-native versions, or you want to explicitly use the Haul bundler, please check out the V1 documentation.

License

MIT

Generated by 🚫 dangerJS against fc2b2cf

[codecov]

Codecov Report

Merging #2719 (fc2b2cf) into master (fe949e5) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           master    #2719    +/-   ##
========================================
  Coverage   51.76%   51.76%            
========================================
  Files         751      751            
  Lines       21110    21110            
  Branches     3691     4018   +327     
========================================
  Hits        10928    10928            
  Misses      10140    10140            
  Partials       42       42            

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fe949e5...fc2b2cf. Read the comment docs.