From 5d448509c70e482d43ea2e20439e07be0e9decfc Mon Sep 17 00:00:00 2001 From: Colin Galindo Date: Sat, 25 Feb 2017 09:30:30 -0600 Subject: [PATCH] Add instructions to use source-map-explorer --- README.md | 1 + packages/react-scripts/template/README.md | 32 +++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/README.md b/README.md index 39baa1a5073..9e0dfd286e2 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,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 1f4f59b4e47..1628543f7f5 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -61,6 +61,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Editor Integration](#editor-integration) - [Developing Components in Isolation](#developing-components-in-isolation) - [Making a Progressive Web App](#making-a-progressive-web-app) +- [Analyzing the Bundle Size](#analyzing-the-bundle-size) - [Deployment](#deployment) - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing) - [Building for Relative Paths](#building-for-relative-paths) @@ -1206,6 +1207,37 @@ Learn more about React Storybook: You can turn your React app into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) by following the steps in [this repository](https://github.com/jeffposnick/create-react-pwa). +## 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. For example, Python contains a built-in HTTP server that can serve static files: