Skip to content

Commit 6370e40

Browse files
authored
Temporarily remove doc section on webpack analyzer (#4564)
1 parent a98c3df commit 6370e40

File tree

1 file changed

+0
-47
lines changed

1 file changed

+0
-47
lines changed

packages/react-scripts/template/README.md

-47
Original file line numberDiff line numberDiff line change
@@ -2048,14 +2048,6 @@ will affect your users' experience.
20482048
20492049
## Analyzing the Bundle Size
20502050
2051-
When your app grows in size, it's easy for bundles to become bloated. The first step to solving large bundles is understanding what's in them!
2052-
2053-
There are many different tools available to analyze bundles, but they typically rely on either **sourcemaps** or **webpack-specific JSON stats**.
2054-
2055-
### Using Sourcemaps
2056-
2057-
When building for production, sourcemaps are automatically created adjacent to the JS files in `build/static/js`.
2058-
20592051
[Source map explorer](https://www.npmjs.com/package/source-map-explorer) analyzes
20602052
JavaScript bundles using the source maps. This helps you understand where code
20612053
bloat is coming from.
@@ -2090,45 +2082,6 @@ npm run build
20902082
npm run analyze
20912083
```
20922084
2093-
### Using Webpack Stats JSON
2094-
2095-
> Note: this feature is available with [email protected] and higher.
2096-
2097-
Webpack can produce a JSON manifest that details the bundles, and several tools can use that file to do analysis.
2098-
2099-
Unlike with sourcemaps, the JSON file isn't created automatically on build. You must pass a `--stats` flag:
2100-
2101-
```sh
2102-
npm run build -- --stats
2103-
```
2104-
2105-
Once the build is complete, you should have a JSON file located at `build/bundle-stats.json`.
2106-
2107-
The quickest way to get insight into your bundle is to drag and drop that JSON file into [Webpack Visualizer](https://chrisbateman.github.io/webpack-visualizer/).
2108-
2109-
Another very popular tool is [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer).
2110-
2111-
To use `webpack-bundle-analyzer`, start by installing it from NPM:
2112-
2113-
```sh
2114-
npm install --save webpack-bundle-analyzer
2115-
# or, with Yarn:
2116-
yarn add webpack-bundle-analyzer
2117-
```
2118-
2119-
2120-
In `package.json`, add the following line to `scripts`:
2121-
2122-
```diff
2123-
"scripts": {
2124-
+ "analyze": "npm run build -- --stats && webpack-bundle-analyzer build/bundle-stats.json",
2125-
"start": "react-scripts start",
2126-
"build": "react-scripts build",
2127-
"test": "react-scripts test --env=jsdom",
2128-
```
2129-
2130-
When you run `npm run analyze`, a new build will be created, and a browser tab should open automatically, displaying the sizes of the modules within your bundle.
2131-
21322085
## Deployment
21332086
21342087
`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.<hash>.js` are served with the contents of the `/static/js/main.<hash>.js` file.

0 commit comments

Comments
 (0)