react.js : component内でCDNを読み込む事は可能か？？

今していること

react.jsを使用し、webアプリケーションの作成。
(create-react-app使用)

//index.html(bootstrap, bootswatchを読み込ませただけ)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel='stylesheet' href='https://bootswatch.com/4/sketchy/bootstrap.min.css'>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>sample</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

//app.js(ルートパスでUser component読み込ませる)
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Navbar from './components/Navbar';
import Users from './components/Users';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
            <Navbar />
            <div className="container mt-5">
              <div className="row">
                <Route exact path="/" component={ Users } />
              </div>
            </div>
        </div>
      </Router>
    );
  }
}

export default App;

//Users.js(不要部分は除いてあります)
import React, { Component } from 'react';

class Users extends Component {
  
  render() {
    return (
      <React.Fragment>
        <h3>Hello</h3>
      </React.Fragment>
    );
  }
}

export default Users;

疑問点

ここでUsers.jsで国籍の違うuser達の一覧を表示
→userごとに国旗iconを表示したい
→CDNの使用(https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css)

ここでCDNを読み込ませようとするとindex.htmlのhead内に記載すると思われる
→それだとUsersコンポネント以外読み込んだ場合もCDNが読み込まれ無駄ではないか
→しかしコンポネント内でのCDNの読み込み方をググっても見つからずこちらで質問させていただきました。

よろしくお願いいたします。

jun68ykt

2018/10/10 10:38

こんにちは。確認ですが、国旗iconを出すために読み込んでいるCDNは、具体的にどれになりますでしょうか？

kazoogon

2018/10/10 10:41

flag-icon-css https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css こちらです

jun68ykt

2018/10/10 11:00

ご返信ありがとうございます。ちょっと調べてみたところ、flag-icon-css　を Reactで使えるらしき react-flag-icon-css というモジュールをみつけました。???? https://github.com/matteocng/react-flag-icon-css CDNではなくこのモジュールを使ってみるという案はNGなのでしょうか？（使える "らしき"、と書いたのは、私自身は使ってみた経験がないからです）

kazoogon

2018/10/10 11:04

回答ありがとうございます。　わざわざ調べていただきありがとうございます。　そんな中大変恐縮なのですが、今はこのiconがどう使えるかよりもcomponentごとにCDNが読み込めるのか？(bootstrapなど他のCDNも含め) が知りたかったです。　やはりcomponentごとに読み込むのは無理でfileをダウンロードしてcomponentごとにimportするしかないんですかね？？　　質問の仕方がこちら悪かったかもしれません、申し訳ございませんでした。

jun68ykt

2018/10/10 11:09

いえいえ問題ありません。確認したかっただけです。なるほどです。役立つか分かりませんが回答書きます。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

stackoverflow の以下の質問

how to import libraries from cdn in reactjs?

についている以下の回答

https://stackoverflow.com/a/42915577

にならって、以下の方法でいかがでしょうか？

(1) Userコンポーネントにだけ適用したいスタイルを User.scss として作成する。

(2) 作成した User.scss の中に以下を記述する。

@import 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css';

(3) Userコンポーネントで以下のように import (※仮にUser.scss　は User.jsx と同じディレクトリにあるとします。）

javascript
1import './User.scss';

参考になれば幸いです。

投稿2018/10/10 11:15

jun68ykt

総合スコア9058

kazoogon

2018/10/10 11:22

なるほど、scssファイル作り、実は中身はCDN読み込んでいるだけってことですね。これだと無駄なscssを作って読み込んでいるだけになっちゃうような気がするので、教えていただいたモヂュールをnpmで読み込もうかと思います。解決と致しますが、気になるのが単純にCDN読み込んだほうが速い + ファイル自体をローカルに置かないので重くならない　と思っていてできるだけCDNでやろうとしてるんですが、別にそんなことないんですかね？？とにもかくにも素早い回答で助かりました、ありがとうございます。

jun68ykt

2018/10/10 11:28

> これだと無駄なscssを作って読み込んでいるだけになっちゃうような気がするので、はい。その「気がする」は正しいようです。回答 https://stackoverflow.com/a/42915577 のコメントでも色々突っ込まれています。ですが 10個の Good がついているので、ウソでもないのだろう、と。ベストアンサーになっている https://stackoverflow.com/a/42922165 では、以下の使用を推奨していますが、これも私自身は未経験です。 https://github.com/jso0/html-webpack-cdn-plugin > とにもかくにも素早い回答で助かりました、ありがとうございます。どういたしまして。むしろなんだか中途半端な回答ですみませんという感じですが、とりあえず一歩進めそうでしたら嬉しい限りです。

行動規範の内容に同意します