cdnでプラグインを利用する場合と、npmやyarnでプラグインをinstallして使用する場合では何が違うのでしょうか。

Question

質問なのですが、
cdnを使ってプラグインを使用するのと、npmやyarnを使ってプラグインをinstallするのではどう違うのでしょうか？
読み込みの速度などに差が出るのでしょうか。

例えば、font awesomeのcdnを利用するのと、nuxt-fontawesomeをnpm installで使用する場合などです。

単純に疑問に思ってしまったので質問してみました。
よろしくお願いします。

Answer 1

パブリックCDNを使うメリット、デメリットは以下のような感じです。

メリット

• 配信用の高速なサーバを使える
• ある程度の大きさがあるライブラリの場合、他のコードが変わってもライブラリ単位でキャッシュが効く
• 有名なライブラリの場合、他のサイトも同じCDNを呼んでいて、すでにキャッシュがある可能性がある
• 試作品を作成するような場合に、ファイルを用意しなくても始められる

デメリット

• CDNが止まると、正しく表示されなくなる
• リクエスト数が増える
• HTML側にCDN呼び出しを書く必要がある

なお、importなどで参照したものをCDNから呼び出すことも、たとえばWebpackならexternalsのような設定があるので可能です。「CDNを使う/使わない」でJavaScriptコードを切り替える必要もなく、コード内で依存性を表現したまま一部のライブラリだけCDNを参照させることができます。

Comments

[aa316316]

ご回答ありがとうございます！

CDNのメリット、デメリットをわかりやすく教えていただき助かりました！
教えていただいたことから考えると、試作品でライブラリを使用する場合にはCDN、本番用にはnpm/yarnを使用するという使い分けの方がよろしいのでしょうか？

[maisumakun]

本番でも、externalsの設定を使って、ある程度大きなライブラリ（jQuery、React本体など）についてはCDNを経由させることがあります。

Answer 2

わたしもよく チュートリアルだとか コードスニペットを誰かに見せるために CDN (Contents Delivery Network) で配信されているライブラリの URL をコピペして使うことがあります

ただ、実際の開発では package.json に追記することのほうが多いですね

---

yarn / npm では package.json に各コマンド (yarn add, npm install) を使って「そのプロジェクトではどのライブラリが必要なのか」というのを明示しています

CDN を利用することで...URL のコピペで... (git などの版管理システムの履歴に残るかもしれませんが) その明示的な部分を隠蔽することになるかもしれません

開発者として自分のプロジェクトを立ち上げて 各ライブラリを利用するのであれば:

• 当該プロジェクトにおけるライブラリの依存性を明示 (package.json に記録する)
• (国を跨ぐような) 地域差による配信速度のバラつきを均さなければならない問題に直面したときに初めて 別途 CDN を利用する

という方が良いのかもしれません

そういった開発する場合の視点で考えてみると 単純に考えられるかもしれません

なにか参考になれば幸いです

Comments

[maisumakun]

自分の回答に書きましたが、「package.jsonで設定したライブラリ参照を、Webpackなどの設定でCDN経由に切り替える」ことも可能です。

[aa316316]

ご回答ありがとうございます！
ひとまず、npm or yarnでライブラリを使用する方が間違いないということでよろしいでしょうか。
教えていただいた通り、確かにcdnでパッケージを使う際、nuxtの場合、package.jsonとは別ファイルに記述する必要があるので、npm or yarnを利用しpackage.json内で使用しているプラグインを見ることができるようにする方がわかりやすいのかなと思いました！

cdnとnpm/yarnに関して、依存性の見通し以外、例えばライブラリの読み込み速度等にも違いはあるのでしょうか？

[gouf]

速度が気になるような経験をしたことがないので わかりません

ただ他の回答・コメントでも言及のある通り 大きめのライブラリ・フレームワークを必要とするときに CDN を利用することで準備に掛かる時間の短縮が期待できるかもしれませんね