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

Question

当我学习jQuery和Bootstrap时,我们(我的同事学习网络框架)被告知CDN有很多好处等等.

现在我正在涉及React/Babel,我们被告知我们应该下载这些文件,并让我们的主机服务器准备就绪.但我们仍然能够使用CDN,但仅用于原型设计和开发,不建议用于生产.

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

我引用这些陈述:

Babel:浏览器中的编译具有相当有限的用例,因此如果您在生产站点上工作,则应该预编译脚本服务器端

React:" 上述版本仅用于开发,不适合生产.React的缩小和优化生产版本可用. "(页面底部)

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

编辑：

您正在使用没有 JSX 的 React。

没有 JSX 的反应

JSX 不是使用 React 的必要条件。当您不想在构建环境中设置编译时，不使用 JSX 使用 React 尤其方便。

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

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

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

试试这个在线 Babel 编译器，看看 JSX 是如何转换为 JavaScript 的，以及生成了多少代码。

因此，如果您在不使用JSX 的情况下使用React，那么使用 CDN 来获取 React 库比将其托管在您的服务器中要快。它的工作原理与 jQuery 和 Bootstrap 相同。您不需要包含 Babel，因为您没有使用 JSX。

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

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

说清楚，

使用 CDN：

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

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

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

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

在客户端的浏览器上：

JSX -> JavaScript -> Execute

使用编译（生产版本）：

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

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

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

在你的电脑：

JSX -> JavaScript -> minified JavaScript

在客户端的浏览器上：

JavaScript -> Execute

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

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