You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
JavaScript bundles using the source maps. This helps you understand where code
2061
2053
bloat is coming from.
@@ -2090,45 +2082,6 @@ npm run build
2090
2082
npm run analyze
2091
2083
```
2092
2084
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
-
2132
2085
## Deployment
2133
2086
2134
2087
`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