Reactjsでの開発を進めていき、最終的なバンドルサイズが大きすぎてしまうということがよくあるかと思います。そこで今回はCDN (Contents Delivery Network)を利用して、モジュールを分散させることによってバンドルサイズの低減を狙いたいと思います。
CDNを利用することで、バンドルサイズを減らし、同時アクセス時の待ち時間を減らせることや、自分のサーバを使わないため、負荷を減らせること、さらに、他のサイトでCDNでダウンロードしたコンテンツがキャッシュに残っていればそのコンテンツのダウンロード時間を節約できるなど、ユーザ側にもサーバ側にもメリットがあるように思います。
今回はReactjsをwebpackを使ってバンドルを生成する時のやり方について説明します。
公式の説明
webpackの公式ページの説明ではCDNを使う方法について書いてあるのですが、説明が不足していて、応用方法がわかりづらかったです。以下はjQueryの例です。
module.exports = {
//...
externals: {
jquery: 'jQuery',
},
};これにより、Reactjs内で以下のようなコードでHTMLヘッダーから jQueryを利用できるようになるというものです。
import $ from 'jquery';<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
...
</html>名前が少し複雑なモジュールでも利用したい
この方法で同様にmaterial uiについてもCDNを利用してバンドルを減らしたいと思います。
やり方の結論から書くと、以下のようになります。
module.exports = {
//...
externals: {
'@material-ui/core': 'MaterialUI',
},
};<html>
<head>
<script src="https://unpkg.com/@material-ui/core@4.12.1/umd/material-ui.production.min.js"></script>
</head>
...
</html>なぜこのような表記で実現できるのか原理について説明します。
webpack.config.jsのexternalsの設定方法は、次のようになっています。
module.exports = {
//...
externals: {
'{Reactjs内でのモジュール名}': '{ブラウザ上でのモジュール名}',
},
};‘{Reactjs内でのモジュール名}’とは、import ~~ from ‘{Reactjs内でのモジュール名}’の部分を見ればわかります。
‘{ブラウザ上でのモジュール名}’は、利用するCDNコンテンツの中身に依存しています。これは利用しているCDNコンテンツがどのようにグローバル変数として登録しているのかがわからないといけません。
簡単な調べ方は、Chromeなどの開発者ツールを利用してconsole上でwindowと打ってみて、利用したいモジュール名があるか探すことです。
ここで見つけた名前をwebpack.config.js上のexternalsで登録することでCDN経由で利用することができます。
TypeScript製のモジュールでの利用
TypeScriptで書かれたCDNコンテンツはReactjs上ではそのまま読み込めません。そのため、一度webpackでjs製のバンドルを作成して自分のサーバ上に置いて読み込むという方法で上記と同じことが出来るようになります。
やり方はこちらで説明しております。
コメント