当我学习jQuery& Bootstrap,我们(我的同行学习网络框架)被告知CDN有很多好处等等。
现在我正在涉及React / Babel,我们被告知我们应该下载这些文件并让我们的主机服务器准备就绪。但我们仍然能够使用CDN,但用于原型设计和仅限开发,不建议用于生产。
我认为使用CDN的目的是节省资金,带宽等。
我引用这些陈述:
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);
}
}
答案 0 :(得分:3)
修改强>
您正在使用React without JSX。
没有JSX的反应
JSX不是使用React的要求。运用 当你不想设置时,没有JSX的React特别方便 在构建环境中编译。
由于您不需要在计算机中编译程序,因此可以毫无问题地添加react.min.js
。
Babel用于将JSX转换(编译)为JavaScript,这是不建议的 如下所述在浏览器中执行此操作。
Web中的大多数教程都是关于使用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时,您可以通过避免在客户端浏览器中进行运行时代码转换来节省大量时间。
通常编译会进行代码优化并生成最终的结果代码。
然后你可以缩小它以用短变量名替换长变量,删除注释,删除额外的空行等以减小大小。然后将文件gzip压缩并传输到客户端的浏览器。此阶段(minify和gzip)减小了大小并节省了带宽并增加了网页渲染时间。
在您的计算机上:
JSX -> JavaScript -> minified JavaScript
在客户的浏览器上:
JavaScript -> Execute
在编程中,资源最紧张的工作是编译代码。 (执行取决于代码/逻辑)
因此,您正在执行计算机中资源最耗尽的任务并发送简单的JavaScript来执行,这减少了浏览器要完成的工作,从而加快了网页的加载速度,减少了客户端浏览器的CPU工作量(某些用户可能使用慢速计算机,并且由于使用了太多资源,您的网页可能会挂起他们的计算机。)