Enable source maps for DevTools production builds

[jpribyl]

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]

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]

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 76d79f2

[sizebot]

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 76d79f2

[jpribyl]

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

[bvaughn]

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

[bvaughn]

Looks like this change breaks the local test harness:

To reproduce:

1. Run the inline package watch script:

cd packages/react-devtools-inline
yarn start

2. Run the test shell package watch script:

cd packages/react-devtools-shell
yarn start

3. Open the test harness at localhost:8080

[jpribyl]

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]

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

[jpribyl]

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]

Ok 👍

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

[jpribyl]

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]

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]

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]

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

[jpribyl]

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]

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]

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]

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]

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

[bvaughn]

Thank you. This looks great.

[yoyo837]

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]

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

[GuillaumeCisco]

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