react-native-bundle-discovery 2.1.0 → 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.
Files changed (3) hide show
  1. package/README.md +28 -19
  2. package/index.js +10 -36
  3. package/package.json +4 -2
package/README.md CHANGED
@@ -3,13 +3,11 @@
3
3
  [![react-native-bundle-discovery on npm](https://badgen.net/npm/v/react-native-bundle-discovery)](https://www.npmjs.com/package/react-native-bundle-discovery)
4
4
  [![react-native-bundle-discovery downloads](https://badgen.net/npm/dm/react-native-bundle-discovery)](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
- As example, for iOS you can run the following command, and it will generate the `metro-stats.json` file in the root of your project:
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 \
@@ -112,30 +117,34 @@ npx react-native-bundle-discovery-ui build metro-stats.json
112
117
  | outputJsonPath: string | `<root>/metro-stats.json` | The path where the JSON report will be saved. Defaults to `metro-stats.json` in project root. |
113
118
  | includeCode: boolean | `true` | Whether to include the source and output code in the JSON report. |
114
119
 
115
- ### `createProcessModuleFilter(options: ProcessModuleFilterOptions)`
120
+ **⚠️ Be cautious sharing reports with `includeCode` enabled**
121
+
122
+ Enabling this option significantly increases report size and **embeds the source code** of your assets.
116
123
 
124
+ If your code is proprietary 🔒, share these reports responsibly 🤝!
125
+
126
+ ---
117
127
 
118
- | Prop | Default value | Description |
119
- | ---------------------- | ------------------------- | ----------------------------- |
120
- | removePromisePolyfill: boolean | `false` | Remove the Promise polyfill as Hermes provide own impl. (issue: [#57702](https://github.com/react/react-native/issues/57702)) |
121
- | removeOldRenderer: boolean | `false` | Whether to remove the old renderer. Set to `true` when New Arch is enabled |
122
- | removeNewRenderer: boolean | `false` | Whether to remove the new renderer. Set to `true` when New Arch is disabled |
123
- | removeUTFSequence: boolean | `false` | Remove useless undocumented RN module. |
128
+ ### `createResolveRequest(options: ResolveRequestOptions)`
124
129
 
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. |
125
134
 
126
- Simple helper that devs can use to filter out unnecessary modules from the bundle report.
135
+ Helper that creates a custom resolve request function to filter out unnecessary modules from the bundle.
127
136
  You can get recommendations during the analysis of the bundle report using the CLI tool.
128
137
 
129
138
  ```js
130
139
  // metro.config.js
131
- const {createProcessModuleFilter} = require('react-native-bundle-discovery');
140
+ const { createResolveRequest } = require("react-native-bundle-discovery");
141
+ const resolveRequest = createResolveRequest({
142
+ removePromisePolyfill: true,
143
+ removeUTFSequence: true,
144
+ });
132
145
  const config = {
133
- serializer: {
134
- processModuleFilter: createProcessModuleFilter({
135
- removePromisePolyfill: true,
136
- removeOldRenderer: true,
137
- removeUTFSequence: true,
138
- }),
146
+ resolver: {
147
+ resolveRequest,
139
148
  },
140
149
  };
141
150
  ```
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
- createProcessModuleFilter,
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.1.0",
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": "*"