💨

Next.js と Tailwind でCSSをいじったときにコンパイルが遅い問題をなんとかする

1 min read

この記事は以下のリンク先でNext.jsでコンパイルが遅いと指摘されていた部分に対する解決方法をざっくり紹介するものです。
https://brianlovin.com/overthought/tailwind-css-first-impressions
https://github.com/brianlovin/brian-lovin-next/pull/1193

TL;DR

@tailwind utilities;は巨大なので、頻繁に変更するファイルでインポートするとこれを含めて再コンパイルされるから遅い。
別のファイルに切り出してから、使うところで一緒にインポートすれば問題ない。

効果

どのくらい速くなるのかは実際に見てもらうのが早いと思います。(シャレではない)

上がwith-tailwindcssテンプレートのデフォルトで、下がこの記事の手順を踏んだ場合です。

手順

https://github.com/brianlovin/brian-lovin-next/pull/1193/files

このコミットを見ればわかると思いますが一応

next.jsのexampleにあるwith-tailwindcssテンプレートを例として用意します。

yarn create next-app --example with-tailwindcss with-tailwindcss-app
  1. styles/index.css@tailwindでインポートしている部分を消す
  2. styles/tailwind.css, styles/tailwind-util.cssを作成し、
    styles/tailwind.cssの中で@tailwind base;, @tailwind components;をインポート。
    styles/tailwind-util.cssの中で@tailwind utilities;をインポートする。
  3. _app.jsstyles/tailwind.css, styles/index.css, styles/tailwind-util.cssの順でインポートする
  4. おわり

備考

最初はproductionのときだけpurgeする設定についてても書いてたんですが、どうやらデフォルトでdevelopmentのときは無効になるようでコンパイル時間が変わらなかったので省きました。

Discussion

ログインするとコメントできます