設定方法

Drupalの管理画面から「開発 > パフォーマンス > 帯域幅の最適化」に進み、「CSSを圧縮」「JavaScriptを圧縮」にチェックを入れるだけです。

発生した問題

本題です。

ddev環境では、このオプションを有効にしても、圧縮が有効にならないことがあります。

対処方法

local.settings.php を編集し、下記パラメタを有効化します。

./sites/default/settings.local.php

 /**
  * Disable CSS and JS aggregation.
  */
 $config['system.performance']['css']['preprocess'] = TRUE;
 $config['system.performance']['js']['preprocess'] = TRUE;

※ $config['〜']['〜'] = FALSE; のままにしてしまうと、いくら管理画面で有効化しても反映されません。

確認

出力された HTML を確認します。

反映前

反映後

CSSファイルが1つにまとまり、圧縮が機能しているのが分かります。

終わりに

帯域幅の最適化はちょいちょい表示崩れ等の原因になることがあります。

これに気づかないと、「ローカルで帯域幅さいてきかｎ不具合事象を再現しようとしてるのに、そもそもローカルで帯域幅最適化を有効にすることができない！」となってしまうので、ご活用いただけますと幸いです。