Add instructions to use source-map-explorer (facebook#1641)

BrickworkSoftware · Sep 1, 2017 · c1fd326 · c1fd326
1 parent 98fc60d
commit c1fd326
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -140,6 +140,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
 - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation)
 - [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)
+- [Analyzing the Bundle Size](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#analyzing-the-bundle-size)
 - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment)
 - [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration)
 - [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
@@ -70,6 +70,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Making a Progressive Web App](#making-a-progressive-web-app)
   - [Offline-First Considerations](#offline-first-considerations)
   - [Progressive Web App Metadata](#progressive-web-app-metadata)
+- [Analyzing the Bundle Size](#analyzing-the-bundle-size)
 - [Deployment](#deployment)
   - [Static Server](#static-server)
   - [Other Solutions](#other-solutions)
@@ -1599,6 +1600,37 @@ icons, names, and branding colors to use when the web app is displayed.
 provides more context about what each field means, and how your customizations
 will affect your users' experience.
 
+## Analyzing the Bundle Size
+
+[Source map explorer](https://www.npmjs.com/package/source-map-explorer) analyzes
+JavaScript bundles using the source maps. This helps you understand where code
+bloat is coming from.
+
+To add Source map explorer to a Create React App project, follow these steps:
+
+```
+npm install source-map-explorer --save-dev
+```
+
+Then in `package.json`, add the following line to `scripts`
+On Windows you will have to type the full file path out.
+
+```diff
+   "scripts": {
+     "start": "react-scripts start",
+     "build": "react-scripts build",
+     "test": "react-scripts test --env=jsdom",
++    "analyze": "source-map-explorer build/static/js/main.* "
+```
+
+Then to analyze the bundle run the production build then run the analyze
+script.
+
+```
+npm run build
+npm run analyze
+```
+
 ## Deployment
 
 `npm run build` creates a `build` directory with a production build of your app. Set up your favourite 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.