Skip to content

Commit

Permalink
Generate sourcemaps for production build artifacts (#26446)
Browse files Browse the repository at this point in the history
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
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`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

This PR updates the Rollup build pipeline to generate sourcemaps for
production build artifacts like `react-dom.production.min.js`.

It requires the Rollup v3 changes that were just merged in #26442 .

Sourcemaps are currently _only_ generated for build artifacts that are
_truly_ "production" - no sourcemaps will be generated for development,
profiling, UMD, or `shouldStayReadable` artifacts.

The generated sourcemaps contain the bundled source contents right
before that chunk was minified by Closure, and _not_ the original source
files like `react-reconciler/src/*`. This better reflects the actual
code that is running as part of the bundle, with all the feature flags
and transformations that were applied to the source files to generate
that bundle. The sourcemaps _do_ still show comments and original
function names, thus improving debuggability for production usage.

Fixes #20186 .

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This allows React users to actually debug a readable version of the
React bundle in production scenarios. It also allows other tools like
[Replay](https://replay.io) to do a better job inspecting the React
source when stepping through.

## How did you test this change?

- Generated numerous sourcemaps with various combinations of the React
bundle selections
- Viewed those sourcemaps in
https://evanw.github.io/source-map-visualization/ and confirmed via the
visualization that the generated mappings appear to be correct

I've attached a set of production files + their sourcemaps here:

[react-sourcemap-examples.zip](https://github.com/facebook/react/files/11023466/react-sourcemap-examples.zip)

You can drag JS+sourcemap file pairs into
https://evanw.github.io/source-map-visualization/ for viewing.

Examples:

- `react.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478247-e5cbdee0-83fd-4a19-bcf1-09961d3c7da4.png)

- `react-dom.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478433-b5ccbf0f-8f68-42fe-9db9-9ecb97770d46.png)

- `use-sync-external-store/with-selector.production.min.js`:

![image](https://user-images.githubusercontent.com/1128784/226478565-bc74699d-db14-4c39-9e2d-b775f8755561.png)

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

DiffTrain build for [2c8a139](2c8a139)
  • Loading branch information
hoxyq committed Nov 7, 2023
1 parent 8645888 commit c7e4e4f
Show file tree
Hide file tree
Showing 60 changed files with 320,575 additions and 314,291 deletions.
2,584 changes: 1,307 additions & 1,277 deletions compiled/facebook-www/JSXDEVRuntime-dev.classic.js

Large diffs are not rendered by default.

2,584 changes: 1,307 additions & 1,277 deletions compiled/facebook-www/JSXDEVRuntime-dev.modern.js

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions compiled/facebook-www/JSXDEVRuntime-prod.classic.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @noflow
* @nolint
* @preventMunge
* @preserve-invariant-messages
*/
/*
Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
@noflow
@nolint
@preventMunge
@preserve-invariant-messages
*/
"use strict";
var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
require("ReactFeatureFlags");
Expand Down
22 changes: 11 additions & 11 deletions compiled/facebook-www/JSXDEVRuntime-prod.modern.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @noflow
* @nolint
* @preventMunge
* @preserve-invariant-messages
*/
/*
Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
@noflow
@nolint
@preventMunge
@preserve-invariant-messages
*/
"use strict";
var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
require("ReactFeatureFlags");
Expand Down
22 changes: 11 additions & 11 deletions compiled/facebook-www/JSXDEVRuntime-profiling.classic.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @noflow
* @nolint
* @preventMunge
* @preserve-invariant-messages
*/
/*
Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
@noflow
@nolint
@preventMunge
@preserve-invariant-messages
*/
"use strict";
var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
require("ReactFeatureFlags");
Expand Down
22 changes: 11 additions & 11 deletions compiled/facebook-www/JSXDEVRuntime-profiling.modern.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @noflow
* @nolint
* @preventMunge
* @preserve-invariant-messages
*/
/*
Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
@noflow
@nolint
@preventMunge
@preserve-invariant-messages
*/
"use strict";
var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
require("ReactFeatureFlags");
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2983249dd2bb1a295f27939e36ab0de9e4bfab76
2c8a139a593e0294c3a6953d74b451bd05fdcfca
Loading

0 comments on commit c7e4e4f

Please sign in to comment.