javascript - react Profilering ikke støttet

Chrome React Dev Tools Profil-fane sa til meg "react-profilering støttes ikke".\nMen, jeg er satt opp i min webpack.config.prod.js.\n

Jeg fulgte all beskrivelsen i 'https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977'. Hva om jeg glemmer noe fra nettstedets beskrivelse?

Mitt Chrome Dev-verktøy sa bilde\n

-> min webpack-konfigurasjon.

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"
    }
  },

Dette er 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>
      </>
    );
  }
}

Dette er 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

Sjekk om React lastes fra CDN-et, vær så snill. Noen instruksjoner har React-innholdet i HTML som en <script>

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

Fjern dem, og fjern externals-seksjonen fra webpack, eller endre dem til å bruke profilerings- eller utviklingsversjoner av CDN-en.

Avveiningen er at siden React er så populært, laster sannsynligvis et annet nettsted hovedfilene fra en CDN, så de er allerede i cache. Men hvis du trenger det for utviklings-tilpasning, ser ikke bundleren din React eller React-Dom.