diff --git a/README.md b/README.md index 296925aa655..1197d7b4a7f 100644 --- 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 index 158f553d50b..e30a4405d57 100644 --- 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..js` are served with the contents of the `/static/js/main..js` file.