CSSテーマとJavaScriptを事前に最適化する

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

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

SXAでは、組み込みのテーマ ツールを使用して、フロントエンド開発者マシンで最適化されたファイルをビルドできます。これにより、Sitecoreインスタンスの外部でpre-optimized-minファイルを生成できるため、アセットをより詳細に制御できます。

フロントエンド開発中にすべての最適化を行うことができます。この作業方法では、テーマファイルをGitなどのリポジトリに保存して、バージョン追跡を有効にすることができます。これにより、テーマファイルはシリアル化されたアイテムとして保存されず、その内容はエンコードされないため、テーマファイルのマージが容易になります。また、異なる開発者が同時に同じテーマに取り組むこともできます。

メモ

デフォルトでは、この設定では事前最適化の使用が推奨され、ソースCSSやJSはアップロードされません。デフォルト設定を変更するには、config.jsファイル (<Theme>/gulp/config.js) に移動します。

スタイルとスクリプトのアップロードにpre-optimized-minファイルを使用するには:

  1. SXA CLIを使用して新しいテーマを作成します。すべてのスクリプトとスタイルアセットは、ローカルのテーマフォルダに自動的にダウンロードされます。

  2. npm installを使用して、gulp watcherタスクを実行します

  3. ここでスタイルまたはスクリプトを変更すると、pre-optimized-minファイルが自動的に作成され、Sitecoreインスタンスにアップロードされます。

    たとえば、アコーディオンコンポーネントのスタイルを変更して保存すると、ソースが個別にアップロードされるのではなく、pre-optimized-minファイルを使用してアップロードされることがメッセージに表示されます。

    Uploading of pre-optimized-min was successful message.

    コンテンツエディターでは、テーマのスタイルフォルダーとスクリプトフォルダーにはpre-optimized-minファイルのみが含まれ、ソースアセットは含まれません。

    The theme folder contains the pre-optimized-min folder only.

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、