我希望能够减轻将React应用部署到生产环境时的担忧

1 年 ago

雅, 悟

1 minute

最近我有机会在React中为生产环境进行构建，但是作为一个只在开发服务器上尝试过而从未进行过构建的人来说，我发现有很多需要考虑的重要事项，这让我感到非常不安。

如果我在开发之前知道了这些，我会觉得很轻松。我想总结一下React开发的要点。

1. 在正式环境中进行构建。

用React进行构建。简洁地说，它的意思是将js、css文件合并为一个文件。据说React提供了一些能够执行这种处理的工具，但是由于本次项目是由create react app创建的，所以webpack应该是默认的构建工具。

我开始的时候不知道需要进行Build，并且因为不明所以感到害怕，所以我想告诉之前的自己，“在正式环境中需要进行Build，但是不用害怕。只是将文件整合并使其更轻巧而已。”

对于不同的环境，应该针对性地使用不同的构建命令。

在进行构建（将js文件和css文件捆绑并优化大小）时，如果在项目中安装了dotenv-cli，可以区分使用哪个环境变量文件。

通过编辑package.json文件，可以将build命令分为staging环境用的Build和production环境用的Build。

最终，最终我们最终稳定在了这样的构成上。

我希望对那个初始的自己说：“构建命令的灵活运用非常有用，所以要不断定制。”

..... package.json
"scripts": {
    "start": "react-scripts start",
    "build-staging": "dotenv -e .env.staging react-scripts build",
    "build-production": "dotenv -e .env.production react-scripts build",
    "test": "dotenv -e .env.test react-scripts test",
    "eject": "react-scripts eject"
  },
......

设置错误页面

我想给没有意识到生产环境级别运营的人一个选择，即不会准备这样的错误处理页面，但我想知道在出现错误时应该怎么办。我想告诉他们，“使用React，你可以很容易地准备好这个页面”，并帮助他们减轻不安。

只需要简单地使用 Component 来准备 500 和 404 页面。只需要在其中加入就可以了。

使用组件可以控制在错误发生时要显示的页面。最简单的使用方法是在APP.js中使用它来包裹，这样可以设置一个错误页面来接收所有的错误。

此外，还可以为更多个别功能或每个页面设置错误边界。
根据文档所述，Facebook Messenger 的侧边栏和主屏幕都被包装在不同的错误边界中，即使其中一个发生错误，只要另一个没有问题，它仍然可以继续运行。

解决代码在构建时完全可见的问题。

React 在构建过程中生成了一个文件，这个文件包含了可以将被压缩的代码还原成未压缩的代码的信息，称为 SourceMap。

由於Chrome的預設功能是可以讀取並還原此代碼，所以在開啟開發工具的源碼標籤下，React的代碼已經被還原了。這樣對於安全性來說是不好的，需要解決此問題。

只需将GENERATE_SOURCEMAP=false应用于环境变量（.env文件）即可实现解决方法。

因为不做这个的话会有各种各样的可怕的事情发生，所以我想对那些打算从现在开始使用React的人先教一下。

在React构建时出现的内存不足错误。

React在构建过程中似乎会因生成源代码映射而导致内存不足。如果设置GENERATE_SOURCEMAP=false（如第四行所述），则可以解决此问题，因为源代码映射将不会生成。

如果仍然无法解决，请尝试通过NODE_OPTIONS=–max_old_space_size=~来释放可以分配的堆内存上限，我认为这样可以解决问题。

就我个人的情况来说，我是在EC2上进行构建的，但其实那边出现了内存不足的问题，通过分配swap空间解决了这个问题，所以问题排查非常重要。

如果你了解了这个程度，似乎可以大大减少在生产环境中运行React所感到的不安，所以我总结了一下。