Reactのパッケージをunpkgから拾う

Reactを入れたプロジェクトを回していた所、煩雑になってきたのでReact本体はCDNから参照させることにしました。

うまくいかない、リモートサーバの開発環境

Reactのパッケージは、process.env.NODE_ENVをみて振り分けるようになっています。

index.js

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

ただ、developmentのほうは、TerserやUglifierで圧縮してしまうと警告が出ます。ややこしいのが、「開発環境をリモートに置く場合」です。

リモートにミニファイしないまま置いておいては、いくら開発用といっても容量や通信時間がかさむので、ミニファイしたいのですが、

• develop版→上述のように、ミニファイすると警告される上にビルド時間がかかる
• production版→Reactのデバッグがやりづらい

ということで、どちらも困難な選択肢となってしまいます。

unpkgというCDN

パブリックなCDNはいろいろ設置されていますが、その中でも注目したいのがunpkgです。unpkgは、npmに上がったものをすべて公開するという形で運営されているため、JavaScript系のライブラリは（npm登録すらない昔のものを除けば）ほぼ完璧に揃います。そして、/react@16.6.3/のような固定バージョン指定だけでなく、/react@^16.6/のような範囲指定や、/react/のような形での最新版指定にも対応しています¹。

ということで、以下のような形で、HTMLにReactを読み込めます。

<!-- 開発用 -->
<script src="https://unpkg.com/react@xx.y.z/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@xx.y.z/umd/react-dom.development.js"></script>
<!-- 本番用 -->
<script src="https://unpkg.com/react@xx.y.z/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@xx.y.z/umd/react-dom.production.min.js"></script>

バンドルから外す

あとは、import Reactなどがあってもバンドルにreactを読み込ませず、HTMLでグローバルに供給したものを読ませるようにするだけです。Webpackであれば以前まとめたように、config.externalsで指定できます。

webpack.config.js

// 一部のみ
externals: {
  react: 'React',
  'react-dom': 'ReactDOM'
}

1. 固定バージョンはCache-control: immutableになるなどしっかりキャッシュされますが、バージョン指定が決めうちにならないものはリダイレクトされて、リダイレクトは時限キャッシュとなります。 ↩