Add instructions to use source-map-explorer #1641

colingalindo · 2017-02-25T15:31:47Z

Add steps in the README to add source-map-explorer to a create react app project

Changes discussed in #1464

gaearon · 2017-02-25T22:24:50Z

README.md

@@ -104,6 +104,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases)
 - [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure)
 - [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts)
+- [Adding bundle analyzer script (source-map-explorer)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bundle-analyzer-scrip-source-map-explorer)


I would move this closer to the end (perhaps before Deployment) and call the section Analyzing the Bundle Size

gaearon · 2017-02-25T22:25:48Z

packages/react-scripts/template/README.md

+     "build": "react-scripts build",
+     "test": "react-scripts test --env=jsdom",
+    "analyze": "source-map-explorer build/static/js/main.* "
+```


Please explain what to do next.

I tested it, and it helped me. It opens a window in your browser, with this kind of screenshot:

hostr · 2017-03-03T20:23:53Z

"analyze": "source-map-explorer build/static/js/main.* "

The wildcard in this command fails on Windows 10 with error "no such file or directory". I wasn't able to find an alternative other than changing it to

"analyze": "source-map-explorer ./build/static/js/main.2a3d68f2.js"

May want to include a disclaimer in there.

colingalindo · 2017-03-03T20:31:05Z

I will play around with it when I get home and see if I can't find a solution for windows. Thanks for the heads up.

evenchange4 · 2017-03-17T01:44:38Z

I have tried the source-map-explorer build/static/js/main.* script for my CRA project.
It is very helpful! Take a look how I analyze the bundle size at cyclejs/cyclejs#510 (comment).

@gr33nfury Thanks for sharing!

colingalindo · 2017-03-27T23:46:30Z

@hostr Sorry it took me so long to get back to this. I updated the README. I tried finding another way in windows but I also couldn't get anything other than typing the full name of the file out to work.

thg303 · 2017-04-13T07:51:58Z

almost a month has passed, any news about this issue?

colingalindo · 2017-04-13T19:44:34Z

I'm not sure what it is waiting on. Is there still something I need to change?

shai32 · 2017-04-14T14:50:21Z

Why not adding source-map-explorer to create-react-app?
it a dev dependency.

colingalindo · 2017-04-14T14:51:59Z

@shai32 #1464 (comment)

Timer · 2017-04-14T16:35:16Z

Please explain what to do next.

We would love a brief writeup to explain how to analyze the produced output. Tell the users what to be on the lookout for, explain that huge (squares) modules are what's taking up space, that they may want to see if they offer a es6 build that may reduce size, etc.
Explain what source-map-explorer is even used for at a rudimentary level.

baptistemanson · 2017-04-14T18:32:28Z

May I suggest @gr33nfury something like:

Analyzing and reducing the bundle size

The size of the Javascript bundle directly impacts the time your application takes to load, in particular on mobile devices. Without any tooling, it may be painful to reduce the size of the bundle.
Luckily, create-react-app is compatible with source-maps-explorer which helps listing the different modules bundled, as well as estimating their relative sizes.

To add source-map-explorer in your CRA project:

npm install source-map-explorer --save-dev

Then you can generate a report by typing:

npm run build
./node_modules/.bin/source-map-explorer build/static/js/main.*

It should open a html report in your browser similar to the following:

In this interactive report, each module is represented by a rectangle. The bigger the rectangle, the bigger the module in bytes. All the sizes listed here are uncompressed.

If you feel that some of your modules is too large, you can:

reimplement your code in a more concise way
avoid inlining assets like images
use ES6 import ... from / export ... from instead of require() to help the tool getting rid of the unused code

If you feel that a third party module is too large compared to the functionalities it provides, you may:

check if the module doesn't exist in a more modular way (like lodash for instance), and include only the required part
look for an alternative module
help the project moving to a bundler like Rollup and/or ES6 import ... from / export ...
reimplement the functionality you need

You also may notice the bundle can contain 2 different versions of the same module (like React for instance), it usually comes from the peer dependencies being incompatible.

ro-savage · 2017-05-29T04:24:15Z

@baptistemanson @Timer
Why don't we include source-map-explorer directly with CRA? Its a very useful tool (I've personally used it on every react project for the past 18months), it requires almost no modifications to CRA, and it avoids people having to read through a massive readme to find out about this feature.

Timer · 2017-05-29T05:18:52Z

I've been using it more lately and I don't know how I ever lived without source-map-explorer; it lets me know immediately where my bloat is coming from and what I need to import() to reduce my bundle size.

Maybe there's an API we can leverage as a secondary package to recommend / suggest to the user what to change / defer loading.

I'm a little tied up with work right now so I can't lay out a more detailed plan, but in a few days I'll have some free time.

ro-savage · 2017-05-29T06:03:44Z

@baptistemanson - I reckon you should go ahead and add source-map-explorer as a dev-dep of CRA and add the analyse command to the default package.json, then modify the readme a little.

I wouldn't think this requires e2e or any other tests. But one of the maintainers might correct me. They might want an e2e just to make sure the command works across platform etc.

I think making automated recommendations to the user is pretty hard. Just letting people see whats causing issues is a huge help.

For me personally, its allowed me to fine heaps of large bundles being imported by packages I use and make PRs to remove them. Often it's something silly like all of lodash being imported just for one function. Or just realise when I should roll my own because the dependency is much too large.

siggirh · 2017-05-29T16:45:14Z

@ro-savage @Timer why do you use source-map-explorer and not webpack-bundle-analyzer? Just wondering because I myself find the source-map-explorer UI so unclear and cluttered. (Maybe for me it helps to have the color distinction or something. Although I do understand different strokes.. ;) )

Timer · 2017-05-29T18:44:24Z

@SR-H see this twitter thread for context

@baptistemanson - I reckon you should go ahead and add source-map-explorer as a dev-dep of CRA and add the analyse command to the default package.json, then modify the readme a little.

I do not believe this is a path we are going to take, but there will be discussions soon once import() is the only supported code splitting mechanism (and require.ensure is gone).
We want to provide very insightful & valuable performance metrics to ensure your applications is blazing fast. 😄

siggirh · 2017-05-29T18:49:07Z

@Timer beautiful, thanks!

siggirh · 2017-05-29T18:52:17Z

@Timer That's referring to webpack-bundle-size-analyzer not webpack-bundle-analyzer, does the latter also have that same issue? (I havent noticed that in my apps before I started using CRA)

Timer · 2017-05-29T19:22:58Z

@SR-H webpack-bundle-analyzer seems fine as well; sorry for not noticing that.
The difference (from what I can tell) is that webpack-bundle-analyzer requires editing webpack config and using its stats object, where source-map-explorer works with the already produced assets and any CRA version.

siggirh · 2017-05-29T20:19:58Z

Cool :)

gaearon · 2017-06-27T21:40:39Z

This is really great. Thank you.

* upstream/master: (55 commits) Fix minor typo (facebook#2679) Bootstrap with Yarn when available (facebook#2673) Add more info about apache client side routing (facebook#2666) Test Node 8 on Travis (facebook#2659) Add json and css to lint-staged in template README (facebook#2671) Add a note about fixed vulnerability in 1.0.8 Publish Changelog for 1.0.8 (facebook#2664) Reformat source code with Prettier 1.5.2 Update Prettier to v1 (facebook#2465) Update ISSUE_TEMPLATE.md Local testing docker links (facebook#2662) Better React Native Web support (facebook#2511) Bump dependencies (facebook#2658) Minor code style edits to user guide (facebook#2660) Don't ask to install webpack for using Styleguidist (facebook#2656) Put react-scripts in dependencies, not devDependencies (facebook#2657) Razzle added to the alternatives (facebook#2517) Warn about large bundle sizes (facebook#2648) Add instructions to use source-map-explorer (facebook#1641) ... # Conflicts: # packages/react-dev-utils/package.json # packages/react-scripts/config/webpack.config.dev.js # packages/react-scripts/config/webpack.config.prod.js # packages/react-scripts/package.json

facebook-github-bot added the CLA Signed label Feb 25, 2017

colingalindo force-pushed the analyze-readme branch from 37183a8 to 83f302c Compare February 25, 2017 15:32

gaearon reviewed Feb 25, 2017

View reviewed changes

colingalindo force-pushed the analyze-readme branch from 83f302c to 4cb5934 Compare February 27, 2017 05:44

Timer mentioned this pull request Mar 17, 2017

0.10 prerelease with webpack 2 increases bundle size #1843

Closed

Add instructions to use source-map-explorer

5d44850

colingalindo force-pushed the analyze-readme branch from 4cb5934 to 5d44850 Compare March 27, 2017 23:45

ro-savage mentioned this pull request May 29, 2017

WIP: add webpack bundle analyzer #2359

Closed

gaearon added this to the 1.0.8 milestone Jun 27, 2017

gaearon added the tag: documentation label Jun 27, 2017

Merge branch 'master' into analyze-readme

64d12fb

gaearon merged commit a4197b6 into facebook:master Jun 27, 2017

gaearon mentioned this pull request Jun 28, 2017

Changelog for 1.0.8 #2664

Merged

romaindso pushed a commit to romaindso/create-react-app that referenced this pull request Jul 10, 2017

Add instructions to use source-map-explorer (facebook#1641)

201c0af

wmonk referenced this pull request in wmonk/create-react-app-typescript Aug 7, 2017

Add instructions to use source-map-explorer (#1641)

6f4c696

morgs32 pushed a commit to BrickworkSoftware/create-react-app that referenced this pull request Sep 1, 2017

Add instructions to use source-map-explorer (facebook#1641)

c1fd326

lock bot locked and limited conversation to collaborators Jan 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add instructions to use source-map-explorer #1641

Add instructions to use source-map-explorer #1641

colingalindo commented Feb 25, 2017 •

edited

Loading

gaearon Feb 25, 2017

colingalindo Feb 27, 2017

gaearon Feb 25, 2017

baptistemanson Mar 29, 2017

hostr commented Mar 3, 2017 •

edited

Loading

colingalindo commented Mar 3, 2017

evenchange4 commented Mar 17, 2017 •

edited

Loading

colingalindo commented Mar 27, 2017

thg303 commented Apr 13, 2017 •

edited

Loading

colingalindo commented Apr 13, 2017

shai32 commented Apr 14, 2017 •

edited

Loading

colingalindo commented Apr 14, 2017

Timer commented Apr 14, 2017 •

edited

Loading

baptistemanson commented Apr 14, 2017 •

edited

Loading

ro-savage commented May 29, 2017 •

edited

Loading

Timer commented May 29, 2017

ro-savage commented May 29, 2017

siggirh commented May 29, 2017

Timer commented May 29, 2017 •

edited

Loading

siggirh commented May 29, 2017

siggirh commented May 29, 2017 •

edited

Loading

Timer commented May 29, 2017

siggirh commented May 29, 2017

gaearon commented Jun 27, 2017

Add instructions to use source-map-explorer #1641

Add instructions to use source-map-explorer #1641

Conversation

colingalindo commented Feb 25, 2017 • edited Loading

gaearon Feb 25, 2017

Choose a reason for hiding this comment

colingalindo Feb 27, 2017

Choose a reason for hiding this comment

gaearon Feb 25, 2017

Choose a reason for hiding this comment

baptistemanson Mar 29, 2017

Choose a reason for hiding this comment

hostr commented Mar 3, 2017 • edited Loading

colingalindo commented Mar 3, 2017

evenchange4 commented Mar 17, 2017 • edited Loading

colingalindo commented Mar 27, 2017

thg303 commented Apr 13, 2017 • edited Loading

colingalindo commented Apr 13, 2017

shai32 commented Apr 14, 2017 • edited Loading

colingalindo commented Apr 14, 2017

Timer commented Apr 14, 2017 • edited Loading

baptistemanson commented Apr 14, 2017 • edited Loading

Analyzing and reducing the bundle size

ro-savage commented May 29, 2017 • edited Loading

Timer commented May 29, 2017

ro-savage commented May 29, 2017

siggirh commented May 29, 2017

Timer commented May 29, 2017 • edited Loading

siggirh commented May 29, 2017

siggirh commented May 29, 2017 • edited Loading

Timer commented May 29, 2017

siggirh commented May 29, 2017

gaearon commented Jun 27, 2017

colingalindo commented Feb 25, 2017 •

edited

Loading

hostr commented Mar 3, 2017 •

edited

Loading

evenchange4 commented Mar 17, 2017 •

edited

Loading

thg303 commented Apr 13, 2017 •

edited

Loading

shai32 commented Apr 14, 2017 •

edited

Loading

Timer commented Apr 14, 2017 •

edited

Loading

baptistemanson commented Apr 14, 2017 •

edited

Loading

ro-savage commented May 29, 2017 •

edited

Loading

Timer commented May 29, 2017 •

edited

Loading

siggirh commented May 29, 2017 •

edited

Loading