Create React App

Create React App

  • Docs
  • Help
  • GitHub

›Development

Welcome

  • About Docs

Getting Started

  • Getting Started
  • Folder Structure
  • Available Scripts
  • Supported Browsers and Features
  • Updating to New Releases

Development

  • Editor Setup
  • Developing Components in Isolation
  • Analyzing Bundle Size
  • HTTPS in Development

Styles and Assets

  • Adding Stylesheets
  • Adding CSS Modules
  • Adding Sass Stylesheets
  • Post-Processing CSS
  • Adding Images, Fonts, and Files
  • Using the Public Folder
  • Code Splitting

Building your App

  • Installing a Dependency
  • Importing a Component
  • Using Global Variables
  • Adding Bootstrap
  • Adding Flow
  • Adding TypeScript
  • Adding Relay
  • Adding a Router
  • Environment Variables
  • Making a Progressive Web App
  • Creating a Production Build

Testing

  • Running Tests
  • Debugging Tests

Back-End Integration

  • Proxying in Development
  • Fetching Data
  • Integrating with an API
  • Title & Meta Tags

Deployment

  • Deployment

Advanced Usage

  • Can I Use Decorators?
  • Pre-Rendering Static HTML
  • Advanced Configuration
  • Alternatives to Ejecting

Support

  • Troubleshooting
Edit

Analyzing the Bundle Size

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 --save source-map-explorer

Alternatively you may use yarn:

yarn add source-map-explorer

Then in package.json, add the following line to scripts:

   "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "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.

npm run build
npm run analyze
← PreviousNext →
Create React App
Docs
Get StartedLearn React
Community
Stack OverflowSpectrumTwitter
More
GitHubStar
Facebook Open Source
Copyright © 2019 Facebook Inc.