CDNを反応電池に使用しないのはなぜですか？

Question

私がjQuery & Bootstrapを学んだとき、私たち（私の仲間のnoobsは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が反応使用するための必要条件ではありません反応します。 を使用するJSXなしで反応させることは、ビルド環境で のコンパイルを設定したくない場合に特に便利です。

コンピュータでプログラムをコンパイルする必要がないため、問題なくreact.min.jsを含めることができます。

BabelはJSXをJavaScriptに変換（コンパイル）するために使用されていますが、これは以下に述べるようにブラウザでは とするようアドバイスされていません。

Webのチュートリアルのほとんどは、Reactを使用する利点の1つであるため、JSXの使用についてです。 JSXは統語的な砂糖です。 JSXを使用してコードを少なく書くことができます。

このonline Babel compilerを試して、JSXがJavaScriptに変換され、どのようにコードが生成されるかを確認してください。

React without JSXを使用している場合、CDNを使用してReactライブラリをフェッチする方が、サーバーでホストする方が速いです。 jQueryやBootstrapと同じように動作します。 JSXを使用していないときにBabelを含める必要はありません。

---

あなたが与えたのと同じFacebookページにCDNが存在しない理由は何ですか？

独自のテキストエディタを使用する場合は、あなたも、この HTMLファイルをダウンロードし、それを編集し、あなたの ブラウザでローカルのファイルシステムからそれを開くことができます。それは遅いランタイムコード変換を行いますので、生産中の を使用しないでください。Facebookは、それはブラウザが遅いランタイムコード変換を行い、言ったように

：CDNを使用して、明確に

をそれを言う

。

あなたのコードはすぐに実行されません。

まずJSXがサポートされていないため、コードをJavaScriptに変換してブラウザで実行できるようにしてください。

JavaScriptに変換した後、ブラウザはブラウザを実行します。

JSX -> JavaScript -> Execute 

コンパイル（製品版）を使用して：：

あなたはJavaScriptにJSXをコンパイルすると、あなたは多くの時間を節約しているランタイムコードを回避することによって、クライアントのブラウザに

クライアントのブラウザでの変換。

通常、コンパイルでコードの最適化が行われ、最終的な結果コードが生成されます。

これを縮小して、長い変数を短い変数名に置き換え、コメントを削除したり、余分な空行などを削除してサイズを縮小することができます。ファイルがgzipされ、クライアントのブラウザに転送されます。この段階（minifyとgzip）は、サイズを減らし、帯域幅を節約し、ウェブページのレンダリング時間を増加させます。クライアントのブラウザで

JSX -> JavaScript -> minified JavaScript 

：お使いのコンピュータで

プログラミングで

JavaScript -> Execute 

、最もリソースを集中作業は、コードをコンパイルしています。

あなたのコンピュータで最もリソースの強いタスクを実行し、実行するために単純なJavaScriptを送信すると、ブラウザで処理する作業が少なくなり、結果としてWebページの読み込み速度が遅くなりますCPUはクライアントのブラウザで動作します（一部のユーザーは低速のコンピュータを使用する可能性があり、リソースが多すぎるためにWebページがコンピュータをハングアップする可能性があります）。