Skip to content

Commit 479d89d

Browse files
IjzerenHeinIjzerenHein
committed
Initial commit
0 parents  commit 479d89d

8 files changed

Lines changed: 136 additions & 0 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎LICENSE.txt‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Hein Rutjes
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# react-native-bundle-visualizer
2+
3+
See what's inside of your react-native bundle 📦
4+
5+
![bundle-visualizer-animation](./react-native-bundle-visualizer.gif)
6+
7+
Uses the awesome [webpack-visualizer](https://github.com/chrisbateman/webpack-visualizer) and [haul](https://github.com/callstack-io/haul) bundler.
8+
9+
## Purpose
10+
11+
Sometimes, importing a single javascript library can drastically increase your bundle size. This library helps you to identify such a library, so you can keep the bundle size low and loading times fast.
12+
13+
## Usage
14+
15+
Install as a dev dependency:
16+
17+
yarn add --dev react-native-bundle-visualizer
18+
or
19+
npm i --save-dev react-native-bundle-visualizer
20+
21+
And run it:
22+
23+
$ react-native-bundle-visualizer
24+
25+
### Gitignore output files
26+
27+
Additionally, add the haul generated `dist` and `.happypack` folders to your `.gitignore` file:
28+
29+
```
30+
dist/
31+
.happypack/
32+
```
33+
34+
## Disclaimer
35+
36+
The sizes reported are an indication rather than the exact byte size in your bundle. This is because the Haul packager returns different bundles compared to the react-native Metro bundler. Also, due to limitations in webpack's stats, the "actual" (minified) numbers reported here are approximate, but they should be pretty close.
37+
38+
## License
39+
40+
[MIT]([./LICENSE.txt])
41+

‎package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "react-native-bundle-visualizer",
3+
"version": "1.0.3",
4+
"description": "See what's inside your react-native bundle",
5+
"author": "IjzerenHein <hrutjes@gmail.com>",
6+
"keywords": [
7+
"react-native-bundle-visualizer",
8+
"react-native",
9+
"react native",
10+
"bundle",
11+
"visualizer",
12+
"size",
13+
"bundle-size"
14+
],
15+
"bin": "./src/react-native-bundle-visualizer.sh",
16+
"repository": "https://github.com/IjzerenHein/react-native-bundle-visualizer",
17+
"bugs": "https://github.com/IjzerenHein/react-native-bundle-visualizer/issues",
18+
"license": "MIT",
19+
"dependencies": {
20+
"babel-loader": "^7.1.2",
21+
"haul": "^1.0.0-beta.5",
22+
"webpack-visualizer-plugin": "^0.1.11"
23+
}
24+
}

‎react-native-bundle-visualizer.gif‎

1.05 MB
Loading

‎src/react-native-bundle-visualizer.sh‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
#!/bin/bash
2+
3+
DIR=./node_modules/react-native-bundle-visualizer/src
4+
CONFIG_FILE=$DIR/webpack.haul.js
5+
if [ -f ./webpack.haul.js ]; then
6+
CONFIG_FILE2=$DIR/webpack.haul.extend.js
7+
fi
8+
9+
./node_modules/.bin/haul bundle --config $CONFIG_FILE --platform ios
10+
if [ $? -eq 0 ]; then
11+
open ./dist/stats.html
12+
fi

‎src/webpack.haul.extend.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const Visualizer = require('webpack-visualizer-plugin');
2+
const originalConfig = require('../../../webpack.haul.js');
3+
4+
module.exports = function(context, config) {
5+
config = originalConfig(context, config);
6+
return {
7+
...config,
8+
plugins: [
9+
...(config.plugins || []),
10+
new Visualizer()
11+
]
12+
};
13+
};

‎src/webpack.haul.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const Visualizer = require('webpack-visualizer-plugin');
2+
3+
module.exports = ({platform}, {module, plugins}) => {
4+
return {
5+
entry: `./index.${platform}.js`,
6+
module: {
7+
...module,
8+
rules: [
9+
{
10+
test: /\.js?$/,
11+
exclude: '/node_modules/',
12+
use: [{
13+
loader: 'babel-loader'
14+
}]
15+
},
16+
...module.rules
17+
]
18+
},
19+
plugins: [
20+
...(plugins || []),
21+
new Visualizer()
22+
]
23+
};
24+
};

0 commit comments

Comments
 (0)