search
LoginSignup
0

More than 3 years have passed since last update.

posted at

updated at

Organization

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/のような形での最新版指定にも対応しています1

ということで、以下のような形で、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になるなどしっかりキャッシュされますが、バージョン指定が決めうちにならないものはリダイレクトされて、リダイレクトは時限キャッシュとなります。 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0