javascript - react Profilering stöds inte

Chrome React Dev Tools flik Profil sa till mig "react Profiling stöds inte".\nMen, jag är inställd på min webpack.config.prod.js.\n

Jag följde alla beskrivningar i 'https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977'. Vad händer om jag glömmer något i deras webbplatsbeskrivning?

Min Chrome Dev Tool sa Bild\n

-> min webpack-konfiguration.

var buildConfig = merge(baseConfig, {
  optimization: {
    minimize: true
  },
  resolve: {
    extensions: [".js", ".css"],
    alias: {
      styles: path.join(__dirname, ""),
      "react-dom$": "react-dom/profiling",
      "scheduler/tracing": "scheduler/tracing-profiling"
    }
  },

Det här är min app.

import * as React from "react";
import { Profiler } from "react";

const logProfile = (
  id: string,
  phase: "mount" | "update",
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
  interactions: Set<any>
) => {
  console.log("Profiling ID", id);
  console.log("Profiling phase", phase);
  console.log("Profiling actualDuration", actualDuration);
  console.log("Profiling baseDuration", baseDuration);
  console.log("Profiling startTime", startTime);
  console.log("Profiling commitTime", commitTime);
  console.log("Profiling interactions", interactions);
};
class TeacherConfig extends React.Component {
  render() {
    return (
      <>
        <Profiler id="application" onRender={logProfile}>
          <div id="preload_hidden">
            <span>abcd</span>
            <span style={{ fontWeight: "bold" }}>abcd</span>
            <span className="set" /> <span className="unlimit" />{" "}
            <span className="start" />
            <span className="time1" />
            <span className="time2" /> <span className="time3" />
          </div>
          <Navigations />
        </Profiler>
      </>
    );
  }
}

Detta är en del av min package.json.

 "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.5.0",
    "react-draggable": "^3.0.5",
    "react-hot-loader": "^4.3.11",
    "react-id-swiper": "^1.6.8",
    "react-resize-detector": "^3.4.0",
    "sass-loader": "^7.1.0",
    "scheduler": "^0.10.0"
}

Svar #1

Kontrollera om React laddas från CDN:et, tack. Vissa instruktioner har React-inkluderingen i HTML som en <script>

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html#write-some-code

Ta bort dem, och ta bort externals-sektionen från webpack, eller ändra dem till att använda profilerings- eller utvecklingsversioner av CDN:en.

Avvägningen är att eftersom React är så populärt, laddar sannolikt en annan webbplats huvudfilerna från ett CDN så de redan finns i cachen. Men om du behöver det för utvecklingsanpassning, ser inte din bundler React eller React-Dom.