次の方法で共有

モジュールの CSS 最適化

  • [アーティクル]

この記事では、Microsoft Dynamics 365 Commerce のモジュール カスケード スタイル シート (CSS) 最適化機能を使用して、eコマース ページの全体的な CSS バンドル サイズを縮小し、ページ パフォーマンスを向上させる方法について説明します。

既定では、テーマは、すべてのモジュール CSS コードがテーマ スタイル ディレクトリの 1 つの静的ファイルにバンドルされます。 このファイルは <THEME_NAME>.theme.scss file という名前で、<THEME_NAME> はテーマの名前です。 次に、オンライン ソフトウェア開発キット (SDK) は、レンダリングされるすべての eコマース ページに、コンテンツ配信ネットワーク (CDN) からこの単一のテーマ CSS ファイルを挿入します。

単一の <THEME_NAME>.theme.scss ファイルにはすべてのモジュールの CSS コードが含まれているため、使用可能なモジュールのサブセットのみを使用するページに、大量の未使用の CSS コードが挿入される可能性があります。 モジュール CSS 最適化機能は、モジュールごとに CSS コードを分割し、レンダリングされた各 eコマース ページに関連するモジュール CSS コードのみを動的に挿入するためのサポートを追加します。

前提条件

モジュール CSS 最適化機能を有効にするには、次の前提条件を満たす必要があります。

  • オンライン SDK バージョン 1.35.17 またはそれ以降が必要です。
  • この機能を使用するには、Webpack 5 が必要です。 upgrade-webpack コマンドライン インターフェイス (CLI) コマンド yarn msdyn365 upgrade-webpack を使用して、SDK コードを Webpack 5 にアップグレードします。
  • Fabrikam 参照テーマ (Fabrikam-design-kit) を使用している場合、モジュール CSS サポートがリリース 9.36 (Commerce バージョン 10.0.26 リリース) 以降に追加されます。

モジュール CSS 最適化を有効にする

モジュール CSS 最適化はオプトイン機能で、次の例で示すように、enableModuleCssOptimization プロパティを src/settings/platform.setings.json ファイルに追加することで有効にできます。

{
    "enableModuleCssOptimization": true
}

個々のモジュールのモジュール CSS 最適化を有効にするようにテーマ スタイルを構成する

各テーマには、すべてのテーマ CSS ファイルが存在するスタイル フォルダーが含まれています。 モジュール固有のスタイルは、スタイル フォルダー内の新しいモジュール ディレクトリに含める必要があります。

メモ

右から左 (RTL) のスタイルを構成する場合、すべての RTL 固有のモジュール スタイルを styles/modules-rtl ディレクトリに追加します。

CSS 最適化を有効にするモジュールごとに、モジュール ディレクトリに、<MODULE_NAME> がモジュール定義ファイル (<MODULE_NAME>.definition.json) の名前プロパティに一致する <MODULE_NAME>.scss および <MODULE_NAME>.js の 2 つのファイルを追加する必要があります。 たとえば、ヘッダー モジュールの場合、2 つのファイルの名前は header.js と header.scss になります。

<MODULE_NAME>.scss ファイルには、ヘッダー モジュールの次の例に示すように、個々のモジュールに必要なすべてのスタイルが含まれています。

header.scss の例。

<MODULE_NAME>.js ファイルは、モジュール CSS チャンクを作成するためのエントリ ファイルです。 次の例に示すように、CSS ファイルをインポートするための 1 行が含まれています。

import "./header.scss"

メモ

SDK Release 1.39 には、既存のテーマに必要なファイル構造を作成するのに役立つ、 optimize-module-css CLI コマンド が含まれています。

モジュール CSS 最適化で使用する CSS の資産を構成する

既定では、すべての資産はルート レベルの public ディレクトリに保存されます (例: public/images)。 モジュール CSS 最適化ファイルで使用するには、資産を public/msdyn365-assets ディレクトリに保存する必要があります (例: public/msdyn365-assets/images)。 次の例で示すように、相対パス ../../../../../msdyn365-assets/ を使用して、資産を msdyn365-assets ディレクトリから Sassy CSS (SCSS) ファイルにインポートする必要があります。

$msv-font-path: ../../../../../msdyn365-assets/webfonts

CSS コンパイル エラー

Webpack 5 は、モジュール CSS チャンクのコンパイルとビルドに使用されます。 プロジェクトが yarn build:prod CLI コマンドを使用してプロダクション モードでビルドされている場合にのみ、CSSコンパイル エラーが表示されます。 CSS コンパイル エラーは、ルート SDK レベルで生成される stats-client-build-errors.json ファイルで見つけることができます。

モジュールの CSS スタイルを構成するためのベスト プラクティス

モジュール CSS スタイルを構成するための次のベスト プラクティスでは、モジュール A とモジュール B を使用して 2 つの異なるモジュールを表します。

  • モジュール A のスタイルをモジュール B のスタイルにインポートすることは避けてください。このアプローチは、より小さな CSS チャンクを作成するという目的に反するためです。 代わりに、モジュール A のスタイルにはモジュール A に関連するスタイルのみを含める必要があり、モジュール B のスタイルにはモジュール B に関連するスタイルのみを含める必要があります。

  • index.scss ファイルを <MODULE_NAME>.scss ファイルにインポートしないでください。 モジュールがファイルからインポートされるすべてのスタイルを使用する場合にのみ、index.scss ファイルをインポートします。

  • 1 つ以上のモジュールで使用されるコンポーネント スタイルは、<MODULE_NAME>.js ファイルにインポートできます。 たとえば、モジュール A とモジュール B が共通のボタン コンポーネント スタイルを使用している場合、次の例に示すように、どちらもコンポーネントをインポートできます。

    module-A.js

    import "./module-A"
import "../common/03-components/button.scss"

    module-B.js

    import "./module-B"
import "../common/03-components/button.scss"

    この方法を使用すると、SDK は、個々のモジュールの CSS チャンクを小さく保つのに役立つ共通の CSS チャンクを作成します。