スタイルとスクリプト

アセットオプティマイザー

Version:

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

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

本番環境では、SXA Asset OptimizerはCSSスタイルとJavaScriptを最適化し、転送が必要なデータ量を減らすことで、エンドユーザーエクスペリエンスを向上させます。

SXAでは、レンダリングやその他のフロントエンド機能は、フロントエンド機能がコンポーネントレベルで分割される傾向があるテーマに保存されたファイルでスタイル設定またはスクリプト化されます。これにより、フロントエンドの開発が容易になりますが、提供する必要があるファイルの数は、運用環境では許容できない場合があります。小さなファイルが多数あると、パフォーマンスが低下し、古いブラウザーでも問題が発生する可能性があります。そのため、Asset Optimizerは本番環境で有効にすることをお勧めします。Sitecore管理者は、このモジュールをSitecoreインスタンス全体に対してグローバルに、または選択したサイトに対してローカルに有効にすることができます。

Asset Optimizerは、次のルールに従ってアセットをグループ化します。

同じフォルダから取得されたアセット。
同じ拡張子を持つアセット。

各グループのアセットは1つのアセットに連結され、サーバーにキャッシュされます。マークアップ内の個々のアセットへの参照は、グループごとに1つの参照に置き換えられるため、次のようになります。

参照パスは、初期アセットと同じフォルダーパスで始まります。
参照パスは、初期アセットと同じ拡張子で終わります。
linkタグのmedia属性の値は、初期アセットと同じです。

次のコードサンプルは、各アセットが個別に参照されるページで使用される1つのテーマのみのサンプルマークアップの一部です。

<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-location-service.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-ajax.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-base-view.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-box.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-data.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-daterange.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-dropdown.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-managed-range.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-range-slider.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-facet-slider.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-load-more.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-location-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-page-selector.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-page-size.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-query.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-radius-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-results.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-results-count.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-results-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-sort.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-url.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-variant-filter.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-service.js"></script>
<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/component-search-router.js"></script>

Asset Optimizerが有効になっている場合、前のHTMLコードサンプルのすべてのリンクが別のテーマファイルにまとめられます。

<script src="/sitecore/shell/-/media/Base-Themes/SearchTheme/Scripts/optimized-min.js?t=20160908T094830Z"></script>

メモ

クエリ文字列にaodisable=1を追加して、要求の資産最適化をオフにします。一部のSXAバージョンでは、 aodisable=1を使用できるようにするには、Sitecore.XA.Foundation.Theming.configファイルのXA.Foundation.Theming.AssetsOptimizationSwitch.Enabled設定を有効にする必要があります。

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