问题描述
当我学习jQuery&；Bootstrap时，我们(学习Web框架的新手伙伴)被告知CDN有很多好处等等。
现在我正在涉猎Reaction/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
Reaction："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);
}
}
推荐答案
编辑：
您正在使用React without JSX。
在没有JSX的情况下进行反应
JSX不是使用REACT的必要条件。使用 不带JSX的Reaction在您不想设置的情况下特别方便 在您的生成环境中向上编译。
因为您不需要在计算机中编译程序，所以可以毫无问题地包含react.min.js。
Web上的大多数教程都是关于使用JSX的，因为这是使用Reaction的优势之一。JSX是一种语法糖。您可以使用JSX编写更少的代码。
尝试online Babel compiler查看JSX如何转换为JavaScript，以及生成了多少代码。
所以，如果您使用的是React without JSX，那么使用CDN获取React库比托管在您的服务器上要快。它的工作方式与jQuery和Bootstrap相同。您不需要包括巴别塔，因为您没有使用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工作(某些用户可能正在使用速度较慢的计算机，而您的网页可能会因为使用太多资源而挂起他们的计算机)。