mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-05-12 03:45:58 +08:00
40 lines
881 B
Markdown
40 lines
881 B
Markdown
---
|
|
id: analyzing-the-bundle-size
|
|
title: Analyzing the Bundle Size
|
|
sidebar_label: Analyzing 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:
|
|
|
|
```sh
|
|
npm install --save source-map-explorer
|
|
```
|
|
|
|
Alternatively you may use `yarn`:
|
|
|
|
```sh
|
|
yarn add source-map-explorer
|
|
```
|
|
|
|
Then in `package.json`, add the following line to `scripts`:
|
|
|
|
```diff
|
|
"scripts": {
|
|
+ "analyze": "source-map-explorer 'build/static/js/*.js'",
|
|
"start": "react-scripts start",
|
|
"build": "react-scripts build",
|
|
"test": "react-scripts test",
|
|
```
|
|
|
|
Then to analyze the bundle run the production build then run the analyze
|
|
script.
|
|
|
|
```sh
|
|
npm run build
|
|
npm run analyze
|
|
```
|