React 生产模式 Best Practice

Posted 2022-05-12 GoldenaArcher

React 生产模式 Best Practice

一些用于生产环境的 Best Practice

检查 dependency 的安全性

socket dev，以 React 为例：

禁用 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 密码，那这样永远都不能验证成功了……