webpackでjQueryを使う時、バンドルするかCDNで読み込ませるか

Question

案件でwebpackでjQueryを使わなければいけなくなりました。

この際に、jQueryを読み込ませる方法は2つあると思います。

• npm i jqueryでインストールしたjQueryをwebpack.config.jsで読み込ませる
• CDNで読み込ませる

サイトパフォーマンスを意識した場合、どちらで読み込ませるほうがいいのでしょうか？
また、一般的にはどっちのほうが主流などはあるのでしょうか？

Answer 1

サイトパフォーマンスを意識した場合、個人的にはCDNがいい気がします。

一番使われてるバージョンのjqueryをCDNへすれば、すでにキャッシュされてる端末が多いので、サーバーへのrequestは減らせます。

ただ、利用ユーザーの環境など様々なことに影響されるため、performaceを測定できるツールで測ってみないと断定はできません。

webpackはshaking機能持ってるので、jquery自体のサイズを小さくできる可能性があります。
https://stackoverflow.com/questions/41514342/is-webpack-smart-enough-to-make-jquery-lighter/41514460

webpackにバンドルして、libraryとapplicationのコード分けてbundleする、bundleしたJSをCDNに置くなどの工夫すれば、早くできます。