質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1957閲覧

BrowserifyでコンパイルしてReact.jsを動かしています

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/07/13 08:03

編集2016/07/13 08:08

requireを使用してBrowserifyでコンパイルする方法と、<script>タグを使用してcdnjsを読み込む方法だと、断然後者のほうが早いのですが、何か問題があるでしょうか?(読み込む順番など)

requireは下記のようにしています。
var React = require("react");
var ReactDOM = require("react-dom");
var ReactRouter = require("react-router");
var $ = require('jquery');

動くことは動くのですが、ものすごく遅くなるので気になりました。。。

もともとcdnjsの方が圧倒的に速いのでしょうか?

コンパイル後のjsファイルは36000行くらいあります。minifyをしてもさほど速さは変わりません。
npmでインストールしているreactなどの元ファイルに異常があるでしょうか?

できればrequireを使用したいので、困っています。
何か原因が思いつく方、おしえてください。

追記: babelについてよく把握していないのですが、babelを使用しているので、いちどコンパイルしています。これが原因のような気がしています。
下記のように読み込んでいます。app.jsがbrowserifyでコンパイルした後のjsファイルです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script> <script type="text/babel" src="./app.js"></script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

はい、CDNJSなどは「Contents Delivery Network」、略してCDNと呼ばれていて、配信を徹底的に速くするためにあらゆるチューニングを行っています。

Browserifyを使いつつCDNから取れるものは取るという、イイトコどりができる手法として、browserify-shimというのがあります(解説)。

投稿2016/07/13 08:07

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/13 08:09

ありがとうございます!そうなんですね。試してみたいと思います。 また、先ほど追記をいたしましたので、そちらもご確認いただいて、もし何か思いつくことがあればご助言いただけましたら幸いです。よろしくお願いいたします。
maisumakun

2016/07/13 08:14

"text/babel"と書くと、使うたびごとにブラウザ内でES6→ES5のコンパイルが行われます。これでは重いので、事前にbabelも回してES5にそろえておきましょう。
退会済みユーザー

退会済みユーザー

2016/07/14 01:20

いろいろとありがとうございます。bable-cliをnpmでインストールしてみました。 babel app.js -o app.jsとして、app.jsをbabelで変換しておりますが、実際読み込むと下記のようなエラーが出てしまいます。 app.js:407 Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element. やはり追記のようにすると上手くいきます。。。
退会済みユーザー

退会済みユーザー

2016/07/14 01:24

babelとbrowserifyとreactifyにそれぞれ順番はあるでしょうか? いまのところbrowserifyとreactifyをしてからbabelをしています。 また、app.jsを読み込む際にbabelをした状態の.jsでも、 <script type="text/babel" src="./app.js"></script> のtype="text/babel"のようにする必要がありますか? すみませんお手数をおかけいたしますが、ご回答がいただけましたら大変に幸いです。 よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2016/07/14 01:25

さっそくのご回答ありがとうございます!babelifyを使用してみたいと思います。
退会済みユーザー

退会済みユーザー

2016/07/14 01:49

babelifyを使ってみました。下記のような問題がありましたが、無事使用することができました。 http://mgi.hatenablog.com/entry/2015/11/01/135222 ただ、うまく動きませんでした・・・ コンソールにエラーなどは出ていませんでした。 読み込む際はtype="text/babel"のようにしています。type="text/babel"を指定しなければエラーが出てしまいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問