为什么“ unstable_profiler”不在生产模式下进行分析

Question

我在我的反应式项目上遇到了unstable_Profiler的问题，该项目忽略了OnRender回调，但仅在生产模式下。没有错误，一切都很好。我撰写了这篇文章：https：//itnext.io/reeact-native-profiler-43d131130c5c

我在开发模式（反应式运行android）上测试了解决方案，一切正常。应用程序的生产构建不起作用。我尝试了最新版本的React和React-Native，React-Dom，Schedule，Scheduler，修改.babelrc，但对我没有任何作用。

import React, { unstable_Profiler as Profiler } from 'react';
const withProfiler = (profilerId) => (WrappedComponent) => {
  class ProfilerComponent extends React.Component {
    async logMeasurement(id, phase, actualDuration, baseDuration) {
      // see output during DEV
      console.log({id, phase, actualDuration, baseDuration});
      // also here is some logic to log durations in prod mode. (eg. logcat)
      // but it never happened. 
    }
    render() {
      return (
        <Profiler id={profilerId} onRender={this.logMeasurement}>
          <WrappedComponent {...this.props} />
        </Profiler>
      );
    }
  }
  return ProfilerComponent;
};
export default withProfiler;

.babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "react-dom$": "react-dom/profiling",
        "scheduler/tracing": "scheduler/tracing-profiling"
      }
    }]
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-remove-console",
      ]
    },
    "development": {
      "plugins": [
        "@babel/plugin-transform-react-jsx-source"
      ]
    }
  }
}

package.json

 "react": "^16.8.1",
 "react-native": "^0.57.8",
 "react-dom": "16.8.1",
 "react-art": "16.8.1",
 "schedule": "^0.4.0",
 "scheduler": "^0.13.1",
 "@babel/core": "7.1.0",
 "@babel/plugin-proposal-decorators": "^7.3.0",
 "@babel/plugin-transform-react-jsx-source": "^7.2.0",
 "@babel/preset-env": "^7.3.1",
 "@babel/register": "^7.0.0",
 "babel-core": "^7.0.0-bridge.0",
 "babel-loader": "^8.0.4",
 "babel-plugin-module-resolver": "^3.1.3",
 "babel-plugin-transform-remove-console": "^6.9.4",
 "metro-react-native-babel-preset": "^0.48.1",

预期的结果是logMeasurement方法在生产应用中运行。

---

编辑

我具有logMeasurement的无效绑定。这是我修复的方式。

logMeasurement = async (id, phase, actualDuration, baseDuration) => { ... }

但是，它没有解决这个问题。回调仍未被调用。

Answer 1

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 Sample extends React.Component {
  render() {
    return (
          <Profiler id="application" onRender={logProfile}>
              <div id="preload_hidden"></div>
          </Profiler>
    );
  }
}

Answer 2

您需要在构建时间选择，因为它是实验性的。

yarn build --profile

您也可以将其添加到您的webpack上，以af的prod js文件构建AD AD AD AD AD AD AD

'react-dom$': 'react-dom/profiling'

Answer 3

我有一个非常相似的问题。显然，这是由于" - "在" id"中引起的。

从

更改它

<Profiler id="Main-Value-Circle" onRender={this.profilerCallback}>

to

<Profiler id="MainValueCircle" onRender={this.profilerCallback}>

解决了我的问题。

Answer 4

react-native

的答案

您可以通过release中的<Profiler>组件捕获分析信息，通过在Babel Configuration中的进口来构建

中的进口。

babel.config.js

require('dotenv').config();
const config = {
    presets: [require('metro-react-native-babel-preset')],
    plugins: [],
};
/* When REACT_ENABLE_RELEASE_PROFILE is set we add these aliases 
 * to also capture React.Profiler metrics in release builds */
if (process.env.REACT_ENABLE_RELEASE_PROFILE) {
    const path = require('path');
    const profilingRenderer = path.resolve(
        __dirname,
        './node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling',
    );
    config.plugins.push(['module-resolver', {
        root: ['./'],
        alias: {
            'ReactNativeRenderer-prod': profilingRenderer,
            'scheduler/tracing': 'scheduler/tracing-profiling',
        },
    }]);
}
module.exports = config;

这将使onRender回调在生产/发布捆绑中工作

默认版本中禁用了分析，因为它添加了一些开销这就是为什么只能像上面的示例

那样有条件地启用它的原因

您可以以多种方式设置此变量 - 在运行脚本之前，也可以作为.env Config

的一部分设置此变量。

在package.json

中

{
  "scripts": {
    "profile:android": "REACT_ENABLE_RELEASE_PROFILE=true npm run android",
    "profile:ios": "REACT_ENABLE_RELEASE_PROFILE=true npm run ios"
  }
}

或.env

REACT_ENABLE_RELEASE_PROFILE=true