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

Projects
None yet
@gr33nfury
Copy link
Contributor

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

@gr33nfury gr33nfury force-pushed the gr33nfury:analyze-readme branch from 37183a8 to 83f302c Feb 25, 2017

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)

This comment has been minimized.

Copy link
@gaearon

gaearon Feb 25, 2017

Member

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

This comment has been minimized.

Copy link
@gr33nfury

gr33nfury Feb 27, 2017

Author Contributor

Moved

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

This comment has been minimized.

Copy link
@gaearon

gaearon Feb 25, 2017

Member

Please explain what to do next.

This comment has been minimized.

Copy link
@baptistemanson

baptistemanson Mar 29, 2017

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

@gr33nfury gr33nfury force-pushed the gr33nfury:analyze-readme branch from 83f302c to 4cb5934 Feb 27, 2017

@hostr

This comment has been minimized.

Copy link

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.

@gr33nfury

This comment has been minimized.

Copy link
Contributor Author

commented Mar 3, 2017

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

This comment has been minimized.

Copy link
Contributor

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!

@gr33nfury gr33nfury force-pushed the gr33nfury:analyze-readme branch from 4cb5934 to 5d44850 Mar 27, 2017

@gr33nfury

This comment has been minimized.

Copy link
Contributor Author

commented Mar 27, 2017

@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

This comment has been minimized.

Copy link

commented Apr 13, 2017

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

@gr33nfury

This comment has been minimized.

Copy link
Contributor Author

commented Apr 13, 2017

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

@shai32

This comment has been minimized.

Copy link

commented Apr 14, 2017

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

@gr33nfury

This comment has been minimized.

Copy link
Contributor Author

commented Apr 14, 2017

@Timer

This comment has been minimized.

Copy link
Collaborator

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Collaborator

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

This comment has been minimized.

Copy link
Contributor

commented May 29, 2017

@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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Collaborator

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

This comment has been minimized.

Copy link

commented May 29, 2017

@Timer beautiful, thanks!

@siggirh

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Collaborator

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

This comment has been minimized.

Copy link

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

0 of 2 checks passed

continuous-integration/appveyor/pr Waiting for AppVeyor build to complete
Details
continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
@gaearon

This comment has been minimized.

Copy link
Member

commented Jun 27, 2017

This is really great. Thank you.

kellyrmilligan added a commit to kellyrmilligan/create-react-app that referenced this pull request Jun 28, 2017

Merge branch 'master' into serve-app-under
* master: (59 commits)
  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)
  Ignore "Skipping static resource" message from SW precache (facebook#2645)
  Add React Styleguidist (facebook#2044)
  Update ISSUE_TEMPLATE.md (facebook#2643)
  Add Brackets to launchEditor.js (facebook#2637)
  Updated README (facebook#1931)
  Less passive-aggressive issue template
  Added instruction on how to install Prettier (facebook#2006)
  Fix CLI grammar (facebook#1945)
  Update README.md (facebook#1813)
  Add more info about OOM build failiure [docs] (facebook#2060)
  Update docs with WebSocket proxy information (facebook#2305)
  Add yarn example under "Installing a Dependency" (facebook#2362)
  ...

@gaearon gaearon referenced this pull request Jun 28, 2017

Merged

Changelog for 1.0.8 #2664

zangrafx added a commit to absolvent/create-react-app that referenced this pull request Jun 29, 2017

Merge remote-tracking branch 'upstream/master'
* 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 added 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 added 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.
You can’t perform that action at this time.