1. スタイリングとスクリプト

アセットオプティマイザーを有効にして設定してください

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Asset OptimizerモジュールはCSSスタイルやJSスクリプトを最適化します。本番環境で有効化すると、転送すべきデータ量を減らし、サイト全体のパフォーマンスを向上させます。Sitecore管理者はこの機能をSitecoreインスタンス全体で有効にするか、選定されたサイトでローカルに有効化できます。

!注開発環境ではアセットオプティマイザーを無効にし、本番環境では有効にするのがベストプラクティスです。

フロントエンド開発者は、事前最適化済みの最小 ファイル(事前コンパイル済みのCSSやJSファイル)を使い、Sitecoreデータベース外のSXAソリューションのスタイルを作成できます。この場合、pre-optimized-minファイルがoptimized-minファイルや通常のアセットに代わります。

テーマスタイルやスクリプトフォルダにoptimized-minやカスタム、またはpre-optimized-minの両方がある場合、以下の表はアセットオプティマイザーが有効または無効化されたときにどのファイルが提供されるかを示しています。

!注Asset OptimizerはES6とは互換性がありません。ES6を使う場合は、最適化のためにSXA CLIを使いましょう。

シナリオ

アセットオプティマイザーの有効または無効

使用ファイル

事前最適化最小

有効化

事前最適化最小値

故障

事前最適化最小

最適化前最小分およびその他の

有効化

事前最適化最小

故障

事前最適化最小

最適化最小化およびその他の

有効化

最適化最小

故障

慣習

アセットオプティマイザーをグローバルに有効または無効にする

オプティマイザーをグローバルに有効または無効にするには:

  • コンテンツエディターで /sitecore/system/Settings/Foundation/Experience Accelerator/Theming/Optimiserに移動し、スクリプトとスタイルの両方で「 Concatenate」と「Minify 」を選択して、すべてのファイルを1つのファイルにまとめます。

    アセットオプティマイザーを全体的に無効にするには、スクリプトやスタイルの縮小・バンドルをオフにするために 「無効 化」を選択してください

    !注リクエストのアセット最適化をオフにするためにクエリ文字列にaodisable=1を追加します。

    SXAバージョンによっては、aodisable=1を使うにはSitecore.XA.Foundation.Theming.configファイルのXA.Foundation.Theming.AssetsOptimizationSwitch.Enabled設定を有効にする必要があるかもしれません。

特定のサイトの最適化設定を変更する

特定のサイトごとに最適化設定を変更するには:

  1. コンテンツエディターで sitecore/content///Presentation/Page Designsに移動します。
  2. アセット最適化セクションの**「スタイル最適化有効**」および**「スクリプト最適化有効**」フィールドで、スタイルとスクリプトの最適化設定を上書きするには、以下を選択してください:
    • デフォルトではグローバル設定を継承します。
    • はい、常にこのサイトの最適化を有効にするために。
    • いいえ、このサイトの最適化を常に無効にすること。

特定のテーマの最適化設定を変更してください

特定のテーマの最適化設定を変更するには:

  1. コンテンツエディターで /sitecore/Media Library/Themes に移動し、アセットオプティマイザーを有効にしたいまたは無効にしたいテーマをクリックしてください。
  2. テーマセクションのモードフィールドで、以下を選択してください:
    • サイトから継承 する - サイトから設定を継承する。
    • システムから継承 する - グローバル設定を継承する。
    • Off - このテーマの最適化を無効にすること。
    • On - このテーマの最適化を可能にするため。

CSSファイルをミニファイションから除外する

例えば、AjaxMinライブラリはCSSファイル内のすべての構文をサポートしていないため、Asset Optimizerによる縮小から特定のCSSファイルを除外したいかもしれません。

ファイルをミニピュレーションから除外するには:

  1. Media Libraryフォルダで、除外したいCSSファイルに移動します。

  2. CSSファイルを右クリックし、「 スクリプト」をクリックして「 未絞出力ファイルに変換」をクリックします。

    CSSファイルはoptimized-min.cssファイルに含まれていますが、その内容は縮小されていません。

この記事を改善するための提案がある場合は、 お知らせください!