Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add instructions to use source-map-explorer #1641

Merged
merged 2 commits into from
Jun 27, 2017

Conversation

colingalindo
Copy link
Contributor

@colingalindo colingalindo commented Feb 25, 2017

#798

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

Changes discussed in #1464

README.md Outdated
@@ -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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please explain what to do next.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@hostr
Copy link

hostr commented Mar 3, 2017

"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
Copy link
Contributor Author

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
Copy link
Contributor

evenchange4 commented Mar 17, 2017

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
Copy link
Contributor Author

@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
Copy link

thg303 commented Apr 13, 2017

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

@colingalindo
Copy link
Contributor Author

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

@shai32
Copy link

shai32 commented Apr 14, 2017

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

@colingalindo
Copy link
Contributor Author

@shai32 #1464 (comment)

@Timer
Copy link
Contributor

Timer commented Apr 14, 2017

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
Copy link

baptistemanson commented Apr 14, 2017

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:

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
Copy link
Contributor

ro-savage commented May 29, 2017

@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
Copy link
Contributor

Timer commented May 29, 2017

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
Copy link
Contributor

@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
Copy link

siggirh commented May 29, 2017

@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
Copy link
Contributor

Timer commented May 29, 2017

@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
Copy link

siggirh commented May 29, 2017

@Timer beautiful, thanks!

@siggirh
Copy link

siggirh commented May 29, 2017

@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
Copy link
Contributor

Timer commented May 29, 2017

@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
Copy link

siggirh commented May 29, 2017

Cool :)

@gaearon gaearon added this to the 1.0.8 milestone Jun 27, 2017
@gaearon gaearon merged commit a4197b6 into facebook:master Jun 27, 2017
@gaearon
Copy link
Contributor

gaearon commented Jun 27, 2017

This is really great. Thank you.

@gaearon gaearon mentioned this pull request Jun 28, 2017
zangrafx added a commit to absolvent/create-react-app that referenced this pull request Jun 29, 2017
* 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
romaindso pushed a commit to romaindso/create-react-app that referenced this pull request Jul 10, 2017
wmonk referenced this pull request in wmonk/create-react-app-typescript Aug 7, 2017
morgs32 pushed a commit to BrickworkSoftware/create-react-app that referenced this pull request Sep 1, 2017
@lock lock bot locked and limited conversation to collaborators Jan 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.