关闭开发者模式后App卡顿延迟（与常规情况相反）技术咨询

嘿，我之前也碰到过这种反直觉的卡顿问题！和你情况一模一样——开着开发者模式时一切流畅，一关就卡到怀疑人生，尤其是绑定了Redux dispatch的按钮点下去要等好几秒。

最可能的原因：Redux日志/调试中间件没在生产环境禁用 #

很多人按文档配置Redux时，容易忽略仅在开发环境加载调试类中间件这一点。比如redux-logger这类中间件，在开发环境打印日志很有用，但在生产环境（关闭开发者模式）运行时，会同步处理大量日志输出，直接阻塞JS线程，导致dispatch响应延迟。

你可以检查下你的Store.js代码，是不是不管环境都加载了logger或者其他调试中间件？比如这种错误写法：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

// 错误：生产环境也加载了logger
const store = createStore(
  rootReducer,
  applyMiddleware(thunk, logger)
);

正确的做法是根据React Native的环境标识__DEV__来判断，仅在开发环境加载调试中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

const middleware = [thunk];
// 仅开发环境添加日志中间件
if (__DEV__) {
  middleware.push(logger);
}

const store = createStore(
  rootReducer,
  applyMiddleware(...middleware)
);

其他排查方向 #

• 检查是否还有其他开发环境专属的工具（比如Redux DevTools的 enhancer）在生产环境被意外启用，这些工具同样会带来性能开销。
• 如果你的reducer里有大量同步计算逻辑，生产环境下没有开发者模式的惰性优化，也可能导致JS线程阻塞，不过这种情况相对少见，优先排查中间件问题。

我当时就是因为忘了在生产环境去掉redux-logger，导致关闭开发者模式后每一次dispatch都要打印巨量日志，按钮点击延迟3秒都有。修改完中间件配置后，卡顿瞬间就消失了！

内容的提问来源于stack exchange，提问作者Alan Yong