生成/编译/部署ReactJS到生产的最佳方法[关闭]

小编典典

生成/编译/部署ReactJS到生产的最佳方法[关闭]

reactjs

我是ReactJS的新手，正在尝试了解什么是将代码部署到生产中的最佳方法。按照下面的链接，我正在使用babel作为下面的代码进行构建，但是我想知道
这是否很好，或者是否有 将ReactJS部署到生产中的 其他最佳实践 ：

npm init -y
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015 babel-preset-react

babel --presets es2015,react --watch src/ --out-dir dist

http://www.sitepoint.com/getting-started-react-
jsx/

这是我的index.html和main.js文件：

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Resources prototype</title>
    <!-- React / Babel / Jquery Libraries -->
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="main.js"></script>

  </body>
</html>

main.js

var First = React.createClass({
  render: function() {
    return (
      <div className="First">
        Hello, world!
      </div>
    );
  }
});
ReactDOM.render(
  <First />,
  document.getElementById('content')
);

阅读 250

2020-07-22

共1个答案

小编典典

我建议使用 Webpack
捆绑您的代码。它将整个应用程序汇总到一个文件中（如果要进一步优化Webpack，则将几个文件合并在一起）。然后，您可以拥有一个非常基本的index.html文件，该文件可以简单地加载捆绑的js文件。可以通过任何方式将其推送到生产服务器。

这是一个很好的教程，可以帮助您开始使用Webpack：使用Webpack和Babel设置React for
ES6（如果您不喜欢这一点，那么这里有很多）

React目前面临的挑战之一是大于最佳的捆绑包大小。对于复杂的应用程序，这可能会成为初始页面加载的问题。输入 同构渲染
。React可以在服务器端运行并呈现可快速下载的应用程序快照。然后，当您实际的应用程序捆绑包下载时，它将无缝地与当前DOM配合使用，从而使用户到达页面时获得更加轻松的用户体验。

这是一个使用React进行同构渲染的示例：Github上的示例

在Google中抛出“ ReactJS同构渲染”以获取更多信息。

2020-07-22