Enable source maps for DevTools production builds #19773

jpribyl · 2020-09-04T17:46:09Z

see #19769 for more context

1. Fork the repository and create your branch from master.
2. Run yarn in the repository root.
[N/A] 3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
5. Run yarn test-prod to test in the production environment. It supports the same options as yarn test.
[N/A] 6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
7. Format your code with prettier (yarn prettier).
8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
9. Run the Flow type checks (yarn flow).
10. If you haven't already, complete the CLA.

Summary

This PR examines the possibility of enabling source maps for DevTools builds. It will enable cheap source maps for dev builds and full source maps for production builds. Here is a summary of local buiild time / bundle size:

With source map:

dev (all browsers were effectively identical):

$ NODE_ENV='development' node build
Hash: c4829ec5c313b61ea00c
Version: webpack 4.43.0
Time: 8254ms
Built at: 09/04/2020 10:18:08 AM
              Asset      Size            Chunks             Chunk Names
      background.js  12.6 KiB        background  [emitted]  background
   contentScript.js  8.57 KiB     contentScript  [emitted]  contentScript
injectGlobalHook.js  1.06 MiB  injectGlobalHook  [emitted]  injectGlobalHook
            main.js  5.39 MiB              main  [emitted]  main
           panel.js  7.49 KiB             panel  [emitted]  panel
        renderer.js  1.02 MiB          renderer  [emitted]  renderer

Hash: 7fa7921c02152b1478f7
Version: webpack 4.43.0
Time: 2936ms
Built at: 09/04/2020 10:18:12 AM
                    Asset      Size   Chunks             Chunk Names
react_devtools_backend.js  1.35 MiB  backend  [emitted]  backend
Entrypoint backend = react_devtools_backend.js

prod:

$ NODE_ENV='production' node build
Hash: b9d3188ad4387ddc4362
Version: webpack 4.43.0
Time: 8667ms
Built at: 09/04/2020 10:20:14 AM
                  Asset      Size  Chunks                          Chunk Names
          background.js  6.84 KiB       0  [emitted]               background
      background.js.map  10.1 KiB       0  [emitted] [dev]         background
       contentScript.js  5.25 KiB       1  [emitted]               contentScript
   contentScript.js.map  6.97 KiB       1  [emitted] [dev]         contentScript
    injectGlobalHook.js   331 KiB       2  [emitted]        [big]  injectGlobalHook
injectGlobalHook.js.map   585 KiB       2  [emitted] [dev]         injectGlobalHook
                main.js  1.21 MiB       3  [emitted]        [big]  main
            main.js.map  2.06 MiB       3  [emitted] [dev]         main
               panel.js  6.01 KiB       4  [emitted]               panel
           panel.js.map  4.72 KiB       4  [emitted] [dev]         panel
            renderer.js   316 KiB       5  [emitted]        [big]  renderer
        renderer.js.map   559 KiB       5  [emitted] [dev]         renderer

Hash: a85dde34549156f02cf7
Version: webpack 4.43.0
Time: 3152ms
Built at: 09/04/2020 10:20:17 AM
                        Asset     Size  Chunks                          Chunk Names
    react_devtools_backend.js  451 KiB       0  [emitted]        [big]  backend
react_devtools_backend.js.map  770 KiB       0  [emitted] [dev]         backend

Without source map

dev:

$ NODE_ENV='development' node build
Hash: c4829ec5c313b61ea00c
Version: webpack 4.43.0
Time: 8064ms
Built at: 09/04/2020 11:54:45 AM
              Asset      Size            Chunks             Chunk Names
      background.js  12.6 KiB        background  [emitted]  background
   contentScript.js  8.57 KiB     contentScript  [emitted]  contentScript
injectGlobalHook.js  1.06 MiB  injectGlobalHook  [emitted]  injectGlobalHook
            main.js  5.39 MiB              main  [emitted]  main
           panel.js  7.49 KiB             panel  [emitted]  panel
        renderer.js  1.02 MiB          renderer  [emitted]  renderer

Hash: 7fa7921c02152b1478f7
Version: webpack 4.43.0
Time: 3093ms
Built at: 09/04/2020 11:54:48 AM
                    Asset      Size   Chunks             Chunk Names
react_devtools_backend.js  1.35 MiB  backend  [emitted]  backend

prod:

$ NODE_ENV='production' node build
Hash: b9d3188ad4387ddc4362
Version: webpack 4.43.0
Time: 7012ms
Built at: 09/04/2020 10:22:05 AM
              Asset      Size  Chunks                    Chunk Names
      background.js   6.8 KiB       0  [emitted]         background
   contentScript.js  5.21 KiB       1  [emitted]         contentScript
injectGlobalHook.js   331 KiB       2  [emitted]  [big]  injectGlobalHook
            main.js  1.21 MiB       3  [emitted]  [big]  main
           panel.js  5.98 KiB       4  [emitted]         panel
        renderer.js   316 KiB       5  [emitted]  [big]  renderer

Hash: a85dde34549156f02cf7
Version: webpack 4.43.0
Time: 2576ms
Built at: 09/04/2020 10:22:08 AM
                    Asset     Size  Chunks                    Chunk Names
react_devtools_backend.js  451 KiB       0  [emitted]  [big]  backend

codesandbox-ci · 2020-09-04T17:49:14Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 76d79f2:

Sandbox	Source
React	Configuration

sizebot · 2020-09-04T17:51:57Z

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 76d79f2

sizebot · 2020-09-04T17:52:28Z

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 76d79f2

jpribyl · 2020-09-13T19:04:22Z

@bvaughn hey! Do you think we are good to merge on this one or is there more to do?

bvaughn · 2020-09-14T12:55:21Z

@jpribyl Needs to be reviewed by someone on the team. Normal PR process.

bvaughn · 2020-09-14T14:15:40Z

Looks like this change breaks the local test harness:

To reproduce:

Run the inline package watch script:

cd packages/react-devtools-inline
yarn start

Run the test shell package watch script:

cd packages/react-devtools-shell
yarn start

Open the test harness at localhost:8080

jpribyl · 2020-09-14T15:23:12Z

Oh dear, it definitely does! I will look into it a bit this evening - did you run across any clues to point us in the right direction? I'm guessing there is probably just another config option which must be updated?

bvaughn · 2020-09-14T15:50:09Z

I didn't have time to dig in, sorry.

…com:jpribyl/react into issue-19769-enable-source-maps-for-devtools

jpribyl · 2020-09-14T16:11:54Z

I found this thread webpack/webpack#5491 and was able to trace the issue to webpack.config.js in react-devtools-inline - I think we can fix the issue by using a full source-map for dev and prod or an inline-source-map for dev and full source-map for prod

bvaughn · 2020-09-16T01:15:26Z

Ok 👍

Full source-map seems kind of slow. Can you measure the difference between it and inline-source-map in DEV?

jpribyl · 2020-09-16T17:21:53Z

It seems fairly comparable to inline-source-map on my machine

inline-source-map:

$ yarn start
yarn run v1.22.5
$ cross-env NODE_ENV=development webpack --config webpack.config.js --watch

webpack is watching the files…
Hash: dcd89313738cc121ebc4
Version: webpack 4.43.0
Time: 7453ms
Built at: 09/16/2020 11:13:43 AM
      Asset      Size    Chunks             Chunk Names
 backend.js  1.55 MiB   backend  [emitted]  backend
frontend.js  3.61 MiB  frontend  [emitted]  frontend
Entrypoint backend = backend.js
Entrypoint frontend = frontend.js
[../react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js] 2.26 KiB {backend} [built]
[../react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js] 8.03 KiB {backend} [built]
[../react-devtools-shared/src/backend/agent.js] 23.9 KiB {backend} [built]
[../react-devtools-shared/src/backend/console.js] 8.04 KiB {backend} [built]
[../react-devtools-shared/src/backend/index.js] 3.16 KiB {backend} [built]
[../react-devtools-shared/src/backend/legacy/renderer.js] 29.1 KiB {backend} [built]
[../react-devtools-shared/src/bridge.js] 8.94 KiB {backend} {frontend} [built]
[../react-devtools-shared/src/devtools/store.js] 40 KiB {frontend} [built]
[../react-devtools-shared/src/devtools/views/DevTools.js] 10.3 KiB {frontend} [built]
[../react-devtools-shared/src/hook.js] 11.1 KiB {backend} [built]
[../react-devtools-shared/src/utils.js] 18.9 KiB {backend} {frontend} [built]
[./src/backend.js] 3.61 KiB {backend} [built]
[./src/constants.js] 168 bytes {backend} {frontend} [built]
[./src/frontend.js] 2.97 KiB {frontend} [built]
[react] external "react" 42 bytes {backend} {frontend} [built]

and source-map:

$ yarn start
yarn run v1.22.5
$ cross-env NODE_ENV=development webpack --config webpack.config.js --watch

webpack is watching the files…

Hash: dcd89313738cc121ebc4
Version: webpack 4.43.0
Time: 7797ms
Built at: 09/16/2020 11:18:31 AM
          Asset      Size    Chunks                   Chunk Names
     backend.js   521 KiB   backend  [emitted]        backend
 backend.js.map   797 KiB   backend  [emitted] [dev]  backend
    frontend.js  1.41 MiB  frontend  [emitted]        frontend
frontend.js.map  1.65 MiB  frontend  [emitted] [dev]  frontend
Entrypoint backend = backend.js backend.js.map
Entrypoint frontend = frontend.js frontend.js.map
[../react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js] 2.26 KiB {backend} [built]
[../react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js] 8.03 KiB {backend} [built]
[../react-devtools-shared/src/backend/agent.js] 23.9 KiB {backend} [built]
[../react-devtools-shared/src/backend/console.js] 8.04 KiB {backend} [built]
[../react-devtools-shared/src/backend/index.js] 3.16 KiB {backend} [built]
[../react-devtools-shared/src/backend/legacy/renderer.js] 29.1 KiB {backend} [built]
[../react-devtools-shared/src/bridge.js] 8.94 KiB {backend} {frontend} [built]
[../react-devtools-shared/src/devtools/store.js] 40 KiB {frontend} [built]
[../react-devtools-shared/src/devtools/views/DevTools.js] 10.3 KiB {frontend} [built]
[../react-devtools-shared/src/hook.js] 11.1 KiB {backend} [built]
[../react-devtools-shared/src/utils.js] 18.9 KiB {backend} {frontend} [built]
[./src/backend.js] 3.61 KiB {backend} [built]
[./src/constants.js] 168 bytes {backend} {frontend} [built]
[./src/frontend.js] 2.97 KiB {frontend} [built]
[react] external "react" 42 bytes {backend} {frontend} [built]
    + 275 hidden modules

One other option may be to use eval-cheap-source-map instead (eval-cheap-module-source-map was the one which did not work). It seems to work locally. Here is the comparison:

And the build time is a bit quicker:

$ yarn start
yarn run v1.22.5
$ cross-env NODE_ENV=development webpack --config webpack.config.js --watch

webpack is watching the files…

Hash: 95ff35bf2c6b01db7e07
Version: webpack 4.43.0
Time: 6327ms
Built at: 09/16/2020 11:21:16 AM
      Asset      Size    Chunks             Chunk Names
 backend.js  1.23 MiB   backend  [emitted]  backend
frontend.js  3.31 MiB  frontend  [emitted]  frontend
Entrypoint backend = backend.js
Entrypoint frontend = frontend.js
[../react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js] 2.26 KiB {backend} [built]
[../react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js] 8.03 KiB {backend} [built]
[../react-devtools-shared/src/backend/agent.js] 23.9 KiB {backend} [built]
[../react-devtools-shared/src/backend/console.js] 8.04 KiB {backend} [built]
[../react-devtools-shared/src/backend/index.js] 3.16 KiB {backend} [built]
[../react-devtools-shared/src/backend/legacy/renderer.js] 29.1 KiB {backend} [built]
[../react-devtools-shared/src/bridge.js] 8.94 KiB {backend} {frontend} [built]
[../react-devtools-shared/src/devtools/store.js] 40 KiB {frontend} [built]
[../react-devtools-shared/src/devtools/views/DevTools.js] 10.3 KiB {frontend} [built]
[../react-devtools-shared/src/hook.js] 11.1 KiB {backend} [built]
[../react-devtools-shared/src/utils.js] 18.9 KiB {backend} {frontend} [built]
[./src/backend.js] 3.61 KiB {backend} [built]
[./src/constants.js] 168 bytes {backend} {frontend} [built]
[./src/frontend.js] 2.97 KiB {frontend} [built]
[react] external "react" 42 bytes {backend} {frontend} [built]
    + 275 hidden modules

bvaughn · 2020-09-17T12:50:53Z

Thanks for the info!

6-7 seconds is fairly slow when you're iterating on changes. Hmm. Let me think about it a little.

jpribyl · 2020-09-17T15:51:56Z

One thing that may help - that is only initial load / build time. it is more like 100ms for me locally while editing files:

Time: 144ms
Built at: 09/17/2020 9:50:48 AM
     Asset      Size   Chunks             Chunk Names
backend.js  1.23 MiB  backend  [emitted]  backend
 + 1 hidden asset
Entrypoint backend = backend.js
Entrypoint frontend = frontend.js
[./src/backend.js] 3.61 KiB {backend} [built]
    + 289 hidden modules
Hash: 95ff35bf2c6b01db7e07
Version: webpack 4.43.0
Time: 84ms
Built at: 09/17/2020 9:50:54 AM
     Asset      Size   Chunks             Chunk Names
backend.js  1.23 MiB  backend  [emitted]  backend
 + 1 hidden asset
Entrypoint backend = backend.js
Entrypoint frontend = frontend.js
[./src/backend.js] 3.61 KiB {backend} [built]
    + 289 hidden modules

bvaughn · 2020-09-17T15:53:15Z

Oh! Ok that's much better. I was mostly only curious about the difference in times for changes after the initial startup.

jpribyl · 2020-09-17T15:55:50Z

Ahhh sorry about that! It looks like even the full source-map is only a few hundred ms:

Version: webpack 4.43.0
Time: 336ms
Built at: 09/17/2020 9:55:15 AM
         Asset     Size   Chunks                   Chunk Names
    backend.js  521 KiB  backend  [emitted]        backend
backend.js.map  797 KiB  backend  [emitted] [dev]  backend
 + 2 hidden assets
Entrypoint backend = backend.js backend.js.map
Entrypoint frontend = frontend.js frontend.js.map
[./src/backend.js] 3.62 KiB {backend} [built]
    + 289 hidden modules

bvaughn · 2020-09-17T16:51:53Z

Hm, that's surprising. I tried temporarily turning on source maps for the DevTools inline and shell packages yesterday– and it made hot reloading a lot slower for the web shell. I ended up turning them back off for this reason.

jpribyl · 2020-09-17T18:33:35Z

Interesting, I should probably test on a lower end machine.. this one is very quick. I'll go ahead and push the eval-cheap-source-map and maybe you can test on your machine when you have time? I will also try it out on a slower machine when I have the opportunity!

bvaughn · 2020-09-17T19:33:24Z

I'll go ahead and push the eval-cheap-source-map and maybe you can test on your machine when you have time?

Sounds great! Yes, I will test again, as soon as #19774 lands.

bvaughn · 2020-09-18T14:03:38Z

Testing this branch this morning. Rebuilds are fast for the DEV test harness, so that's great. 👍

bvaughn · 2020-09-18T14:07:11Z

Thank you. This looks great.

yoyo837 · 2020-10-22T03:06:50Z

DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

GuillaumeCisco · 2020-10-22T17:41:52Z

I got the exact same issue as @yoyo837 today...
Did something change?

GuillaumeCisco · 2020-10-22T17:46:41Z

@bvaughn it looks like it has been fixed here
Thank you,

Enable source maps for DevTools production builds

235cce4

facebook-github-bot added the CLA Signed label Sep 4, 2020

bvaughn self-assigned this Sep 5, 2020

ermanzohre approved these changes Sep 7, 2020

View reviewed changes

ermanzohre approved these changes Sep 13, 2020

View reviewed changes

Added source-maps to scheduling profiler production builds as well

c351818

jpribyl added 2 commits September 14, 2020 10:03

Use source-map in devtools-inline

9521b57

Merge branch 'issue-19769-enable-source-maps-for-devtools' of github.…

324045b

…com:jpribyl/react into issue-19769-enable-source-maps-for-devtools

Use eval-cheap-source-map in dev builds of react-devtools-inline

76d79f2

ermanzohre approved these changes Sep 17, 2020

View reviewed changes

bvaughn self-requested a review September 18, 2020 13:59

bvaughn approved these changes Sep 18, 2020

View reviewed changes

bvaughn merged commit b3b1bb9 into facebook:master Sep 18, 2020

Friss mentioned this pull request Oct 22, 2020

Bug: Error loading source maps for devtools extension #20075

Closed

sytranvn mentioned this pull request Oct 22, 2020

Fix error loading source maps for devtools extension #20079

Merged

Enable source maps for DevTools production builds #19773

Enable source maps for DevTools production builds #19773

Uh oh!

Conversation

jpribyl commented Sep 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

With source map:

Without source map

Uh oh!

codesandbox-ci bot commented Sep 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sizebot commented Sep 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size changes (experimental)

Uh oh!

sizebot commented Sep 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size changes (stable)

Uh oh!

jpribyl commented Sep 13, 2020

Uh oh!

bvaughn commented Sep 14, 2020

Uh oh!

bvaughn commented Sep 14, 2020

Uh oh!

jpribyl commented Sep 14, 2020

Uh oh!

bvaughn commented Sep 14, 2020

Uh oh!

jpribyl commented Sep 14, 2020

Uh oh!

bvaughn commented Sep 16, 2020

Uh oh!

jpribyl commented Sep 16, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bvaughn commented Sep 17, 2020

Uh oh!

jpribyl commented Sep 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bvaughn commented Sep 17, 2020

Uh oh!

jpribyl commented Sep 17, 2020

Uh oh!

bvaughn commented Sep 17, 2020

Uh oh!

jpribyl commented Sep 17, 2020

Uh oh!

bvaughn commented Sep 17, 2020

Uh oh!

bvaughn commented Sep 18, 2020

Uh oh!

bvaughn commented Sep 18, 2020

Uh oh!

yoyo837 commented Oct 22, 2020

Uh oh!

GuillaumeCisco commented Oct 22, 2020

Uh oh!

GuillaumeCisco commented Oct 22, 2020

Uh oh!

Reviewers

Assignees

Labels

Milestone

jpribyl commented Sep 4, 2020 •

edited

Loading

codesandbox-ci bot commented Sep 4, 2020 •

edited

Loading

sizebot commented Sep 4, 2020 •

edited

Loading

sizebot commented Sep 4, 2020 •

edited

Loading

jpribyl commented Sep 16, 2020 •

edited

Loading

jpribyl commented Sep 17, 2020 •

edited

Loading