不必要な CSS の削除

[shun91]

2 から分離

https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#%E4%B8%8D%E5%BF%85%E8%A6%81%E3%81%AA-css-%E3%81%AE%E5%89%8A%E9%99%A4

[shun91]

複数ページ遷移しつつcoverageを確認したら、ほとんど不必要なCSSだ... ただ、どうしたら削減できるかは現段階で不明。

[shun91]

yarn build時に以下の警告が出ている。

warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

↓翻訳

テンプレートパスが提供されていないため、Tailwindは未使用のスタイルを削除していません。
Tailwindの外部でPurgeCSSを手動で構成した場合、または未使用のスタイルを意図的に削除しない場合は、Tailwind構成ファイルで `purge：false`を設定して、この警告を消します。
https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

提示されたURLに記載されている通り、purgeを設定してみる。

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index a4f9cbb..e99f9bf 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   darkMode: false,
+  purge: ['./src/**/*.html', './src/**/*.jsx'],
 };

もともと3MiBぐらいあったcssがめっちゃ軽くなった。

asset styles/main.css 381 KiB [emitted] [big] (name: main)

[shun91]

[shun91]

まだまだ不必要なCSSは多そうだが、ひとまず後回しにする。