Skip to content

Commit c1fd326

Browse files
colingalindomorgs32
authored andcommitted
Add instructions to use source-map-explorer (facebook#1641)
1 parent 98fc60d commit c1fd326

File tree

2 files changed

+33
-0
lines changed

2 files changed

+33
-0
lines changed

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
140140
- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
141141
- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation)
142142
- [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)
143+
- [Analyzing the Bundle Size](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#analyzing-the-bundle-size)
143144
- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment)
144145
- [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration)
145146
- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting)

packages/react-scripts/template/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
7070
- [Making a Progressive Web App](#making-a-progressive-web-app)
7171
- [Offline-First Considerations](#offline-first-considerations)
7272
- [Progressive Web App Metadata](#progressive-web-app-metadata)
73+
- [Analyzing the Bundle Size](#analyzing-the-bundle-size)
7374
- [Deployment](#deployment)
7475
- [Static Server](#static-server)
7576
- [Other Solutions](#other-solutions)
@@ -1599,6 +1600,37 @@ icons, names, and branding colors to use when the web app is displayed.
15991600
provides more context about what each field means, and how your customizations
16001601
will affect your users' experience.
16011602

1603+
## Analyzing the Bundle Size
1604+
1605+
[Source map explorer](https://www.npmjs.com/package/source-map-explorer) analyzes
1606+
JavaScript bundles using the source maps. This helps you understand where code
1607+
bloat is coming from.
1608+
1609+
To add Source map explorer to a Create React App project, follow these steps:
1610+
1611+
```
1612+
npm install source-map-explorer --save-dev
1613+
```
1614+
1615+
Then in `package.json`, add the following line to `scripts`
1616+
On Windows you will have to type the full file path out.
1617+
1618+
```diff
1619+
"scripts": {
1620+
"start": "react-scripts start",
1621+
"build": "react-scripts build",
1622+
"test": "react-scripts test --env=jsdom",
1623+
+ "analyze": "source-map-explorer build/static/js/main.* "
1624+
```
1625+
1626+
Then to analyze the bundle run the production build then run the analyze
1627+
script.
1628+
1629+
```
1630+
npm run build
1631+
npm run analyze
1632+
```
1633+
16021634
## Deployment
16031635

16041636
`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.

0 commit comments

Comments
 (0)