React 生产模式 Best Practice

一些用于生产环境的 Best Practice

检查 dependency 的安全性

• socket dev，以 React 为例：

  

• kandi

禁用 React Dev Tool

有两种解决方法。

JS 版本：

// 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 版本：

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 本身就要通过中间件，所以在中间件这里判断生产环境即可，大体代码为：

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

reference: How to exclude / disable Redux devtools in production build or disconnect?

为密码加密

前后端其实都可以对密码进行加密，后端可以使用 bcrypt，前端则有对应的 bcryptjs，等密码返回后使用 bcrypt.compare() 即可以完成判断密码是否相同。

这样一来就不用明文向后台传输密码，从而提高安全性能。

当然，这情况下前后端需要统一，不能存在前端密码已经加密了，后端再 hash 密码，那这样永远都不能验证成功了……

最后

以上就是隐形水杯为你收集整理的React 生产模式 Best PracticeReact 生产模式 Best Practice的全部内容，希望文章能够帮你解决React 生产模式 Best PracticeReact 生产模式 Best Practice所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。