cran-pushProductstools

[cran-push] Dynamic Importのchunkファイルを除外するようにしました

CRA (Create React App)でDynamic Importの導入を進めているのですが、cran-pushで作った_headersがえらいことになっていたので修正しました。 v0.0系での出力 Dynami […]

広告ここから
広告ここまで

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

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts