Webpack チャンク最適 テクニック - Qiita

ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン

[mizchi]

書いた。巨大SPAで悩んでる人読んで

[ebo-c]

5M overとかちょっとしたNativeアプリだよね……

[uchiuchiyama]

これが私がNext.jsを好んで使ってる理由。Webpack設定頑張ってた時期もあったけど早々に諦めた

[tsuwatch]

全然バッドノウハウではないんだけど、ここまで書かされるのはしんどいよな

[hylom]

Webpackはここら辺の最適化のハードルが高いのが辛い。そしてどんどんとwebpack.config.jsが秘伝のタレと化していく……

[rgfx]

「ビルドサイズが 3MB 超えたあたりで、日本の一般的な 4G 環境では使い物にならなくなる。」「この辺の最適化が最初からやられているのが next.js 」

[programmablekinoko]

良い知見

[ledsun]

いい話（？）だった

[tune]

大変勉強になりました。

[rna]

Transfer-Encoding: gzip ではあかんのかな。読み込むときでかくなるから一緒？

[jsstudy]

パンチカードでプログラミングしていた時代並みに面倒くさい環境で大変ですねｗ（秘伝のタレ）

[odz]

バッドノウハウぽいな

[Keisuke69]

実践編以降が特に有用なネタだった

[sadness_ojisan]

575

[SnO2WMaN]

575