react-native-bundle-discovery 2.1.0-rc.2 → 2.2.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -28
- package/index.js +10 -36
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -3,13 +3,11 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/react-native-bundle-discovery)
|
|
4
4
|
[](https://www.npmtrends.com/react-native-bundle-discovery)
|
|
5
5
|
|
|
6
|
-
|
|
7
6
|
A simple package that helps developers visualize and analyze the bundle size of React Native apps.
|
|
8
7
|
With this tool, you can easily explore your app's codebase, identify large or heavy packages, and inspect the structure of modules and code within your project.
|
|
9
8
|
|
|
10
9
|
<img width="800" alt="" src="./assets/img.png" />
|
|
11
10
|
|
|
12
|
-
|
|
13
11
|
### Packages:
|
|
14
12
|
|
|
15
13
|
- `react-native-bundle-discovery` - simple JS library to generate a JSON report of the bundle.
|
|
@@ -17,13 +15,20 @@ With this tool, you can easily explore your app's codebase, identify large or he
|
|
|
17
15
|
- `react-native-bundle-discovery-cli` - CLI to analyze the bundle report.
|
|
18
16
|
- `react-native-bundle-discovery-rozenite-plugin` - Rozenite plugin to integrate UI tool to [React Native DevTools](https://reactnative.dev/docs/react-native-devtools).
|
|
19
17
|
|
|
18
|
+
---
|
|
19
|
+
|
|
20
20
|
### Setup:
|
|
21
21
|
|
|
22
22
|
There are two ways to install the package:
|
|
23
23
|
|
|
24
|
-
1. As in independent tool (UI + CLI)
|
|
24
|
+
1. As in independent tool (UI + CLI)
|
|
25
25
|
2. Or as a [Rozenite](_rozenite/README.md) plugin (see: [_rozenite/README.md](_rozenite/README.md))
|
|
26
26
|
|
|
27
|
+
|
|
28
|
+
> 🚀 If you've migrated to [Re.Pack](https://re-pack.dev/), you can still use this package to analyze 📊 JS bundles 📦 generated by Re.Pack.
|
|
29
|
+
>
|
|
30
|
+
> 💡 Learn more: 📖 [Re.Pack.md](./Re.Pack.md)
|
|
31
|
+
|
|
27
32
|
#### 1. Install (independent tool)
|
|
28
33
|
|
|
29
34
|
```bash
|
|
@@ -62,7 +67,7 @@ See: [_rozenite/README.md](_rozenite/README.md)
|
|
|
62
67
|
|
|
63
68
|
### 3. Build the app
|
|
64
69
|
|
|
65
|
-
|
|
70
|
+
For example, for iOS you can run the following command, and it will generate the `metro-stats.json` file in the root of your project:
|
|
66
71
|
|
|
67
72
|
```bash
|
|
68
73
|
npx react-native bundle \
|
|
@@ -99,20 +104,6 @@ npx react-native-bundle-discovery-ui metro-stats.json [--port <port>]
|
|
|
99
104
|
npx react-native-bundle-discovery-ui build metro-stats.json
|
|
100
105
|
```
|
|
101
106
|
|
|
102
|
-
---
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
### Re.Pack Support
|
|
106
|
-
|
|
107
|
-
If you've migrated to [Re.Pack](https://re-pack.dev/docs/guides/bundle-analysis), you can still use this package to analyze bundles generated by Re.Pack.
|
|
108
|
-
|
|
109
|
-
Learn more: [Rsdoctor.md](./Rsdoctor.md)
|
|
110
|
-
|
|
111
|
-
```bash
|
|
112
|
-
npx react-native-bundle-discovery-ui rsdoctor-data.json --format rsdoctor
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
|
|
116
107
|
---
|
|
117
108
|
|
|
118
109
|
### `react-native-bundle-discovery` JS API
|
|
@@ -126,8 +117,6 @@ npx react-native-bundle-discovery-ui rsdoctor-data.json --format rsdoctor
|
|
|
126
117
|
| outputJsonPath: string | `<root>/metro-stats.json` | The path where the JSON report will be saved. Defaults to `metro-stats.json` in project root. |
|
|
127
118
|
| includeCode: boolean | `true` | Whether to include the source and output code in the JSON report. |
|
|
128
119
|
|
|
129
|
-
|
|
130
|
-
|
|
131
120
|
**⚠️ Be cautious sharing reports with `includeCode` enabled**
|
|
132
121
|
|
|
133
122
|
Enabling this option significantly increases report size and **embeds the source code** of your assets.
|
|
@@ -138,22 +127,19 @@ If your code is proprietary 🔒, share these reports responsibly 🤝!
|
|
|
138
127
|
|
|
139
128
|
### `createResolveRequest(options: ResolveRequestOptions)`
|
|
140
129
|
|
|
141
|
-
| Prop
|
|
142
|
-
|
|
|
143
|
-
| removePromisePolyfill: boolean | `false`
|
|
144
|
-
|
|
|
145
|
-
| removeNewRenderer: boolean | `false` | Whether to remove the new renderer. Set to `true` when New Arch is disabled |
|
|
146
|
-
| removeUTFSequence: boolean | `false` | Remove useless undocumented RN module. |
|
|
130
|
+
| Prop | Default value | Description |
|
|
131
|
+
| ------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
132
|
+
| removePromisePolyfill: boolean | `false` | Remove the Promise polyfill as Hermes provide own impl. (issue: [#57702](https://github.com/react/react-native/issues/57702)) |
|
|
133
|
+
| removeUTFSequence: boolean | `false` | Remove useless undocumented RN module. |
|
|
147
134
|
|
|
148
135
|
Helper that creates a custom resolve request function to filter out unnecessary modules from the bundle.
|
|
149
136
|
You can get recommendations during the analysis of the bundle report using the CLI tool.
|
|
150
137
|
|
|
151
138
|
```js
|
|
152
139
|
// metro.config.js
|
|
153
|
-
const {createResolveRequest} = require(
|
|
140
|
+
const { createResolveRequest } = require("react-native-bundle-discovery");
|
|
154
141
|
const resolveRequest = createResolveRequest({
|
|
155
142
|
removePromisePolyfill: true,
|
|
156
|
-
removeOldRenderer: true,
|
|
157
143
|
removeUTFSequence: true,
|
|
158
144
|
});
|
|
159
145
|
const config = {
|
package/index.js
CHANGED
|
@@ -215,8 +215,6 @@ function createSerializer({
|
|
|
215
215
|
*/
|
|
216
216
|
const empty = { type: "empty" };
|
|
217
217
|
const createResolveRequest = ({
|
|
218
|
-
removePromisePolyfill = false, // Remove useless polyfill (Hermes already has Promise)
|
|
219
|
-
removeOldRenderer = false, // Should be true when new ARCH is enabled
|
|
220
218
|
removeNewRenderer = false, // Should be true when new ARCH is disabled
|
|
221
219
|
removeUTFSequence = false, // Remove useless code
|
|
222
220
|
} = {}) => {
|
|
@@ -231,20 +229,6 @@ const createResolveRequest = ({
|
|
|
231
229
|
) {
|
|
232
230
|
return empty;
|
|
233
231
|
}
|
|
234
|
-
if (
|
|
235
|
-
removePromisePolyfill &&
|
|
236
|
-
result?.filePath?.endsWith("/react-native/Libraries/Promise.js")
|
|
237
|
-
) {
|
|
238
|
-
return empty;
|
|
239
|
-
}
|
|
240
|
-
if (
|
|
241
|
-
removeOldRenderer &&
|
|
242
|
-
result?.filePath?.endsWith(
|
|
243
|
-
"/react-native/Libraries/Renderer/shims/ReactNative.js",
|
|
244
|
-
)
|
|
245
|
-
) {
|
|
246
|
-
return empty;
|
|
247
|
-
}
|
|
248
232
|
if (
|
|
249
233
|
removeNewRenderer &&
|
|
250
234
|
result?.filePath?.endsWith(
|
|
@@ -264,8 +248,6 @@ const createResolveRequest = ({
|
|
|
264
248
|
const createProcessModuleFilter =
|
|
265
249
|
({
|
|
266
250
|
removePromisePolyfill = false, // Remove useless polyfill (Hermes already has Promise)
|
|
267
|
-
removeOldRenderer = false, // Should be true when new ARCH is enabled
|
|
268
|
-
removeNewRenderer = false, // Should be true when new ARCH is disabled
|
|
269
251
|
removeUTFSequence = false, // Remove useless code
|
|
270
252
|
} = {}) =>
|
|
271
253
|
(module) => {
|
|
@@ -275,22 +257,6 @@ const createProcessModuleFilter =
|
|
|
275
257
|
) {
|
|
276
258
|
return false;
|
|
277
259
|
}
|
|
278
|
-
if (
|
|
279
|
-
removeOldRenderer &&
|
|
280
|
-
module.path.endsWith(
|
|
281
|
-
"/react-native/Libraries/Renderer/shims/ReactNative.js",
|
|
282
|
-
)
|
|
283
|
-
) {
|
|
284
|
-
return false;
|
|
285
|
-
}
|
|
286
|
-
if (
|
|
287
|
-
removeNewRenderer &&
|
|
288
|
-
module.path.endsWith(
|
|
289
|
-
"/react-native/Libraries/Renderer/shims/ReactFabric.js",
|
|
290
|
-
)
|
|
291
|
-
) {
|
|
292
|
-
return false;
|
|
293
|
-
}
|
|
294
260
|
if (
|
|
295
261
|
removeUTFSequence &&
|
|
296
262
|
module.path.endsWith("/react-native/Libraries/UTFSequence.js")
|
|
@@ -302,7 +268,15 @@ const createProcessModuleFilter =
|
|
|
302
268
|
};
|
|
303
269
|
|
|
304
270
|
module.exports = {
|
|
305
|
-
createResolveRequest,
|
|
306
271
|
createSerializer,
|
|
307
|
-
|
|
272
|
+
createResolveRequest,
|
|
273
|
+
get createProcessModuleFilter() {
|
|
274
|
+
console.warn(
|
|
275
|
+
`[${NAME}]: ⚠️'createProcessModuleFilter' is deprecated. Use 'createResolveRequest' instead.`,
|
|
276
|
+
);
|
|
277
|
+
return createProcessModuleFilter;
|
|
278
|
+
},
|
|
279
|
+
get BundleDiscoveryPlugin() {
|
|
280
|
+
return require("./webpack").BundleDiscoveryPlugin;
|
|
281
|
+
},
|
|
308
282
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-bundle-discovery",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-rc.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": "git@github.com:retyui/react-native-bundle-discovery.git",
|
|
6
6
|
"author": "David <4661784+retyui@users.noreply.github.com>",
|
|
@@ -9,7 +9,9 @@
|
|
|
9
9
|
"prepublishOnly": "cp ../README.md README.md"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"chalk": "^4.1.2"
|
|
12
|
+
"chalk": "^4.1.2",
|
|
13
|
+
"acorn": "^8.0.4",
|
|
14
|
+
"acorn-walk": "^8.0.0"
|
|
13
15
|
},
|
|
14
16
|
"peerDependencies": {
|
|
15
17
|
"metro": "*"
|