React 生产模式 Best PracticeReact 生产模式 Best Practice

103 阅读 0 评论 68 点赞

我是靠谱客的博主隐形水杯，这篇文章主要介绍React 生产模式 Best PracticeReact 生产模式 Best Practice，现在分享给大家，希望可以做个参考。

React 生产模式 Best Practice

一些用于生产环境的 Best Practice

检查 dependency 的安全性

socket dev，以 React 为例：
kandi

禁用 React Dev Tool

有两种解决方法。

JS 版本：

复制代码

1
2
3
4
5
6
7
8
9
10
// disable react-dev-tools for this project
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
  for (let [key, value] of Object.entries(
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__
  )) {
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] =
      typeof value == "function" ? () => {} : null;
  }
}

TS 版本：

复制代码

1
2
3
4
5
6
7
8
9
10
11
const disableReactDevTools = (): void => {
    const noop = (): void => undefined;
    const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;

    if (typeof DEV_TOOLS === 'object') {
        for (const [key, value] of Object.entries(DEV_TOOLS)) {
            DEV_TOOLS[key] = typeof value === 'function' ? noop : null;
        }
    }
};

不过我没有测试过……

另一个方法是这两天找到的一个库：disable-react-devtools

禁用 Redux Dev Tool

开启 Redux Dev Tool 本身就要通过中间件，所以在中间件这里判断生产环境即可，大体代码为：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import reducer from "~/redux/reducers";
import mySaga from "~/redux/sagas";
import { nodeEnv } from "~/utils/config";

const composeEnhancers =
  (nodeEnv !== "production" &&
    typeof window !== "undefined" &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;

const sagaMiddleware = createSagaMiddleware();

export default createStore(
  reducer,
  composeEnhancers(applyMiddleware(sagaMiddleware))
);

sagaMiddleware.run(mySaga);