为什么我不应该将 CDN 用于 react 和 babel？

Question

当我学习 jQuery 和 Bootstrap 时，我们（我的新手学习 Web 框架）被告知 CDN 有很多好处等等。

现在我正在涉足 React/Babel，我们被告知我们应该下载文件并从我们的主机服务器上准备好所有文件。但我们仍然能够使用 CDN，但仅用于原型设计和开发，不建议用于生产。

我认为使用 CDN 的目的是节省资金、带宽等。

我引用这些陈述：

巴别塔：Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side

反应：“The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available.”（页面底部）

class Button1 extends React.Component {
    constructor(props) {
        super(props);
        this.but = null;
    }
    render() {
        let c = 'mdc-button mdc-button--raised mdc-button--primary mdc-ripple-upgraded';
        let l = e('label', {}, this.props.label);
        let i = iconToggle(this.props.icon);
        this.but = e('button', {className: c, onClick: () => {toggleLights()}}, l, i);
        return e('div', {className: 'myCenter'}, this.but);
    }
}

Answer 1

编辑：

您正在使用React without JSX。

没有 JSX 的反应

JSX 不是使用 React 的必要条件。使用 React without JSX 在你不想设置的时候特别方便 在您的构建环境中进行编译。

由于您不需要在您的计算机中编译您的程序，您可以毫无问题地包含react.min.js。

Babel 用于将 JSX 转换（编译）为 JavaScript，不建议这样做 如下所述在浏览器中执行此操作。

网络上的大多数教程都是关于使用 JSX，因为它是使用 React 的优势之一。 JSX 是一种语法糖。您可以使用 JSX 编写更少的代码。

试试这个online Babel compiler，看看 JSX 是如何转换为 JavaScript 的，以及生成了多少代码。

所以，如果您使用的是React without JSX，那么使用 CDN 获取 React 库比将其托管在您的服务器中要快。它的工作方式与 jQuery 和 Bootstrap 相同。你不需要包含 Babel，因为你没有使用 JSX。

---

为什么你不应该使用 CDN 出现在你给出的同一个 Facebook 页面中。

如果您更喜欢使用自己的文本编辑器，您也可以下载这个 HTML 文件，编辑它，然后从您的本地文件系统中打开它 浏览器。它执行缓慢的运行时代码转换，所以不要使用它 正在生产中。

说清楚，

使用 CDN：

正如 Facebook 所说，它在浏览器中进行了缓慢的运行时代码转换。

那是您的代码不会立即执行。

首先应将您的代码转换为 JavaScript，以便浏览器可以执行它，因为不支持 JSX。

转换成 JavaScript 后，浏览器执行。

在客户端的浏览器上：

JSX -> JavaScript -> Execute

使用已编译（生产版）：

当您将 JSX 编译为 JavaScript 时，您可以避免在客户端浏览器中进行运行时代码转换，从而节省大量时间。

通常编译会优化代码并生成最终结果代码。

然后您可以将其缩小以用短变量名称替换长变量、删除 cmets、删除多余的空行等以减小大小。然后将该文件压缩并传输到客户端的浏览器。这个阶段（minify 和 gzip）减小了大小，节省了带宽，增加了网页渲染时间。

在您的计算机上：

JSX -> JavaScript -> minified JavaScript

在客户端的浏览器上：

JavaScript -> Execute

在编程中，最耗费资源的工作是编译代码。 （执行取决于代码/逻辑）

因此，您正在计算机中执行资源最密集的任务并发送简单的 JavaScript 来执行，这减少了浏览器完成的工作，从而导致网页加载速度更快，客户端浏览器上的 CPU 工作更少（一些用户可以正在使用速度较慢的计算机，并且您的网页可能会由于使用过多的资源而挂起他们的计算机）。