データ量の大きなオブジェクトをビルドやdevelop時に圧縮して使用する方法【React】

Question

１４万行あるオブジェクトをSSGのサイトで使用しています（TypeScriptを使用したサイト）。

しかしデータ量が多いためLightHouseの成績を下げる要因の一つとなっており容量を減らしたいです。

Reactで良いライブラリや良い手法は何かご存知ではないでしょうか？

https://www.compresss.com/jp/compress-json.html
のサイトで圧縮を試みたところ30%ほどの圧縮が可能でした。
しかし毎回上のサイトを使って圧縮〜のようなことは手間がかかること、データの中身が今後は変わっていく可能性もあるため上のようなサイトの圧縮方法をビルド時に行いたいと考えています。

Comments

[maisumakun]

今はどのようなビルドプロセスを行っているのですか？

[moimoi_sushi]

webpackを使用しています。

正確にはフレームワークGatsbyJSのビルドステップに基づいてコンパイルされています。
この記事の最後あたりに「Steps of the build phase」のところにビルド順が掲載されています。
https://www.gatsbyjs.com/docs/conceptual/overview-of-the-gatsby-build-process/

[maisumakun]

当該のJSONはどのように読み込んで使っていますか？

[moimoi_sushi]

const dataObj = {14万行のデータ}
export default dataObj;

↑のように data.ts ファイルの中のオブジェクトとして格納し、 import dataObj from 'src/data.ts' のような形で引っ張って使っています。
そのため実際のところJSONは使っていない形になります（JSONに直して解決できそうであればJSONに直します）

[moimoi_sushi]

webpack処理のところはほとんど触っていないのですが、GatsbyJSの場合はonCreateWebpackConfigという関数にwebpack系の処理を入れることができます。
ここのwebpack系の処理で良い感じに圧縮できるのかはまだわかりませんがそちらでなんとかできそうであれば触ってみようかなと

[moimoi_sushi]

そもそもコンパイルされたデータが既に圧縮？されているものみたいなものですよね...