CRA (Create React App)でDynamic Importの導入を進めているのですが、cran-pushで作った_headersがえらいことになっていたので修正しました。

v0.0系での出力

DynamicImportで生成されるchunkファイルもpushするようになるので、初期ロードがなかなかつらいことになっていました。

/*
  Link: </service-worker.js>; rel=preload; as=script
  Link: </static/css/main.96771ce6.css>; rel=preload; as=style
  Link: </static/css/main.96771ce6.css.map>; rel=preload; as=style
  Link: </static/js/main.98c62e58.js>; rel=preload; as=script
  Link: </static/js/main.98c62e58.js.map>; rel=preload; as=style
  Link: </static/js/0.f1ddcf01.chunk.js>; rel=preload; as=script
  Link: </static/js/0.f1ddcf01.chunk.js.map>; rel=preload; as=style
  Link: </static/js/1.2afddbae.chunk.js>; rel=preload; as=script
  Link: </static/js/1.2afddbae.chunk.js.map>; rel=preload; as=style
  Link: </static/js/10.1da5b362.chunk.js>; rel=preload; as=script
  Link: </static/js/10.1da5b362.chunk.js.map>; rel=preload; as=style
  Link: </static/js/11.b6a9ca57.chunk.js>; rel=preload; as=script
  Link: </static/js/11.b6a9ca57.chunk.js.map>; rel=preload; as=style
  Link: </static/js/12.e61ee5ea.chunk.js>; rel=preload; as=script
  Link: </static/js/12.e61ee5ea.chunk.js.map>; rel=preload; as=style
  Link: </static/js/13.2abb875e.chunk.js>; rel=preload; as=script
  Link: </static/js/13.2abb875e.chunk.js.map>; rel=preload; as=style
  Link: </static/js/14.dca81e21.chunk.js>; rel=preload; as=script
  Link: </static/js/14.dca81e21.chunk.js.map>; rel=preload; as=style
  Link: </static/js/15.5bfa56be.chunk.js>; rel=preload; as=script

v0.1系での出力

chunkは後から読みたいので、さっくり除外しています。

/*
  Link: </service-worker.js>; rel=preload; as=script
  Link: </static/css/main.96771ce6.css>; rel=preload; as=style
  Link: </static/js/main.98c62e58.js>; rel=preload; as=script

常に最新版で使う方法

CI / CD内でコマンドを使えばいいので、npxで動かすと良いかなと思います。

$ yarn run build
$ npx cran-push generate