javascript - 不支持 react 分析

Question

Chrome React Dev Tool 的配置文件选项卡对我说“不支持 react 分析”。\n 但是，我设置在我的 webpack.config.prod.js。\n

我遵循了“https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977”中的所有描述'. 我忘记了网站描述怎么办？

My Chrome Dev Tool Said Image\n

-> 我的 webpack 配置。

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

这是我的应用。

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

这是我的 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"
}

Answer 1

请检查 React 是否从 CDN 加载。一些说明将 React 作为 <script> 包含在 html 中

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

删除它们，并删除 externals来自 webpack 的部分，或更改它们以使用 CDN 的分析器或开发版本。

权衡是因为 React 如此流行，可能另一个站点从 CDN 加载主要文件，所以它已经缓存了。但是，如果您需要它来进行开发定制，您的 bundler 将看不到 React 或 React-Dom。