Reactjsでバンドルサイズ低減のためにTypeScript製の外部モジュールを別ファイルで管理する

バンドルサイズの低減のため、code splitingやCDNを利用するなどの方法があると思います。筆者は後者のCDNのコンテンツを利用する方法を取っていたのですが、Reactjsを使用しているとTypeScriptで書かれたものが読み込めないという問題が発生してしまいます。

今回はこれに対処するために行ったことについて述べたいと思います。

TL;DR

TypeScript製のモジュールをnpm installして、webpackでバンドルを作成する

TypeScriptをjsに変換する

TypeScriptで書かれたモジュールもnpm install でReactjs上で利用することが出来ます。そのため、Reactjs上でモジュールをインポートし、うまくグローバル変数になるように設定し、webpackで圧縮すれば所望のReactjsで読み込めるファイルが作成できます。あとはそのファイルをHTMLのhead上で読み込むように設定すればよいだけです。

今回は具体例としてFullCalendarを使用したいと思います。

npm i fullcalendar@5.9.0

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

global.FullCalendar = FullCalendar
global.dayGridPlugin = dayGridPlugin
global.timeGridPlugin = timeGridPlugin
global.interactionPlugin = interactionPlugin

このようなファイルを作成したらwebpackで圧縮します。

webpack --mode production ./src/build_fullcalendar.js --output fullcalendar.js

作成できたらサーバ上にfullcalendar.jsを置いておきます。モジュールに外部ファイルを利用するために、メインのバンドルを作成するときのwebpackの設定を行います。

詳細な設定方法はこちらで解説しています

module.exports = {
  //...
  externals: {
    '@fullcalendar/react': 'FullCalendar',
    '@fullcalendar/daygrid': 'dayGridPlugin',
    '@fullcalendar/timegrid': 'timeGridPlugin',
    '@fullcalendar/interaction': 'interactionPlugin'
  },
};