为什么我不应该为 React 和 babel 使用 CDN？

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

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

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

我引用这些陈述：

Babel: 在浏览器中编译的用例相当有限，因此如果您在生产站点上工作，则应该在服务器端预编译脚本 https://babeljs.io/docs/setup/#installation

React: "以上版本仅适用于开发，不适合生产。 React 的精简和优化生产版本现已推出。 https://facebook.github.io/react/docs/installation.html“（页面底部）

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

Edit:

您正在使用没有 JSX 的 React https://facebook.github.io/react/docs/react-without-jsx.html.

不使用 JSX 进行反应

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

由于您不需要在计算机中编译程序，因此可以包含react.min.js没有任何问题。

Babel 用于将 JSX 转换（编译）为 JavaScript，不建议这样做 按照我下面的说明在浏览器中执行此操作。

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

尝试这个查看 JSX 如何转换为 JavaScript 以及生成了多少代码。

所以，如果你正在使用没有 JSX 的 React https://facebook.github.io/react/docs/react-without-jsx.html，那么使用 CDN 获取 React 库比将其托管在服务器中更快。它的工作原理与 jQuery 和 Bootstrap 相同。您不需要包含 Babel，因为您不使用 JSX。

为什么您不应该使用 CDN 已在您提供的同一 Facebook 页面中给出。

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

说清楚一点，

使用CDN：

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

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

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

转换为 JavaScript 后，浏览器会执行它。

在客户端浏览器上：

JSX -> JavaScript -> Execute

使用编译的（生产版本）：

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

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

然后您可以缩小它，用短变量名替换长变量，删除注释，删除多余的空行等以减少大小。然后文件被 gzip 压缩并传输到客户端的浏览器。此阶段（minify 和 gzip）可减小大小并节省带宽并增加网页渲染时间。

在你的电脑：

JSX -> JavaScript -> minified JavaScript

在客户端浏览器上：

JavaScript -> Execute

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

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