[ 解決済 ] lightning 15.3.0以降でTree Shakingを有効化するとサイト全体の表示が崩れる

VWSとは フォーラム Lightning [ 解決済 ] lightning 15.3.0以降でTree Shakingを有効化するとサイト全体の表示が崩れる

[ 解決済 ] lightning 15.3.0以降でTree Shakingを有効化するとサイト全体の表示が崩れる

  • このトピックには13件の返信、4人の参加者があり、最後に石川@Vektor,Inc.により1年前に更新されました。
14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • 投稿者
    投稿
  • #72990

    coopal
    参加者

    ■ WordPress のバージョン
    6.1.1

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    15.4.0

    ■ Pro Unit のバージョン
    0.23.4

    ■ スキンの種類
    Evergreen

    ■ スキンのバージョン
    0.2.1

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    Tree Shakingを有効化した状態で、lightning 15.2.4から15.4.0にアップデートすると、グローバルメニュー、パンくずリスト、ページヘッダー等の表示が崩れてしまいます。
    (15.3.0から同様の事象が発生しております)

    また、フッターウィジェットエリアにもナビゲーションメニューブロックを入れておりますが、こちらも表示が崩れます。
    またPC表示にもかかわらず、フッターの下にモバイル用のメニュー(#vk-mobile-nav)が出現します。

    ■ 自分で試した事
    テーマのロールバックと更新を繰り返し、差異を比較
    15.4.0でTree Shakingを無効にすると、表示は正常に戻ることがわかりました。
    15.2.4ではTree Shakingを有効化していても表示は正常でした。

    ■ 症状が発生するブラウザ
    Google Chrome

    ■ 実際の症状
    ヘッダーのnavタグ(#global-nav)にCSS(/themes/lightning/_g3/assets/css/style.css)が当たっていないようです。
    細かく検証できていませんが、他にもCSSが当たっていない要素があります。

    Tree Shakingを無効化すれば、とりあえずは問題ないのですが
    PageSpeedInsightsでCLS等のスコアも落ちてしまいますので
    現状は15.2.4でTree Shakingを有効にして使い続けています。

    15.3.0以降Tree Shakingの有効化が機能しなくなる要件などありましたらご教授いただければ幸いです。

    ■ その他特記事項
    PHPバージョン:8.1.12
    Nginxバージョン:1.23.2

    Attachments:
    You must be logged in to view attached files.

    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #72995

    石川@Vektor,Inc.
    キーマスター

    ご報告ありがとうございます。
    標準状態では有効にしても崩れないので、何か他のプラグインが出力するCSSがトリガーになって Tree Shaking が正常に動作しないのかもしれません。

    プラグインを停止して改善したりしますか?

    #72996

    coopal
    参加者

    ご返信ありがとうございます。
    全てのプラグインを無効にしましたが、状況は変わりません。
    なお、lightning(親テーマ)を有効にして起きている事象です。

    ご参考までに15.2.4(表示正常)と15.4.0(表示崩れ)の同一ページの
    ソースコードの比較を添付いたします。(どちらもTree Shaking有効化状態)

    15.4.0では一部のCSSファイルが読み込まれていないようです

    Attachments:
    You must be logged in to view attached files.
    #73016

    石川@Vektor,Inc.
    キーマスター

    ExUnit > 有効化設定 で CSS最適化が有効になっていますでしょうか?
    有効になっていたら無効化してください。
    (Lightning や VK Blocks で同じライブラリを読み込んでおり、現状 ExUnit に入っているライブラリはバージョンが古い)

    #73018

    石川@Vektor,Inc.
    キーマスター

    G3 Pro Unit のデモサイトと

    HOME


    EverGreen のデモサイトを見る限りは問題なく

    Home

    いただいたpdfのように例えば lightning-common-style が読まれないという事が発生しないので、
    単体不具合ではなく何かしら設定や利用プラグインの干渉ではないかと思うのですが…

    他に表示に問題が発生してる方いらっしゃいませんか?

    #73020

    coopal
    参加者

    CSS最適化を無効にしましたが、状況変わりません。

    前回、全てのプラグインを無効化して状況変わらないとご説明した際は
    VK All in One Expansion Unitも含めて無効化しております。

    利用プラグインの干渉の可能性で言うと
    サーバーはXserver VPSで、KUSANAGIという実行環境でWordpressを動かしております。
    こちらはデフォルトでKUSANAGI専用プラグインが入っており、無効化はできないのですが…

    #73021

    DRILL LANCER
    モデレーター

    KUSANAGIという実行環境でWordpressを動かしております。

    KUSANAGI には専用のキャッシュがあるようですがそのキャッシュはその都度削除しましたか?

    • この返信は1年、 1ヶ月前にDRILL LANCERが編集しました。
    #73023

    coopal
    参加者

    はい、キャッシュは都度削除しております。
    ブラウザもスーパーリロードしています。

    KUSANAGIにはWebサーバー(nginx)側でキャッシュを保持するfcacheと、
    Wordpressでキャッシュを保持するbcacheという機能がありますが
    こちらも全て機能をオフにして確認しましたが、状況は変わりませんでした。

    #73024

    石川@Vektor,Inc.
    キーマスター

    例えばローカルの開発環境などに複製してプラグインを停止しても崩れますか?

    #73048

    coopal
    参加者

    ローカル環境(KUSANAGI無し)で確認したところ、Tree Shakingを有効にしても表示は崩れませんでした。

    プラグインを一切インストールせず(G3 Pro UnitやVK Blocks Proなども入れない)
    LightningのテーマのみインストールしたWordpress環境で
    ①KUSANAGI無し、Tree Shaking有効
    ②KUSANAGI有り、Tree Shaking有効
    の2パターンの環境で同じデータをインポートしたところ
    ①では正常、②では表示崩れが起きましたので、KUSANAGIが原因の可能性が高そうです。

    KUSANAGIはサーバーの実行環境そのものなので、止めることができず
    KUSANAGIの入っていないサーバー環境を一から作り直すか、現行のサーバーでTree Shakingを無効にするか
    表示速度を考えると、どちらの方がいいのか、悩ましいところです…

    Lightning 15.2.4まではKUSANAGI環境でもTree Shakingが機能していたので
    またTree Shakingが使えるようにして頂けると嬉しいです…
    (すみません、技術的な背景がわからない個人の勝手な要望です)

    #73056

    Vektor,Inc
    キーマスター

    今回の頂戴致しましたご意見は社内で検討させていただきます。

    ※可能な限り検討させていただきたく思いますが、
    検討して初めて分かることもあるため、全てを実装することは難しい場合もございます。

    今後ともLightningをよろしくお願いいたします。

    #73278

    石川@Vektor,Inc.
    キーマスター

    今回のKUSANAGIの問題とは別とは思いますが、
    Tree Shaking 関連のライブラリをアップデートしましたので、もしかしたら以下の組み合わせで改善するかもしれません。
    Lightning 15.5.1 / VK Blocks Pro 1.50.1

    #73283

    coopal
    参加者

    ご連絡ありがとうございます。残念ながら改善しませんでした。

    Lightning 15.2.4 / VK Blocks Pro 1.48.1.0の組み合わせまでは
    KUSANAGI環境でTree Shaking有効化しても表示は崩れないのですが
    テーマかプラグインのどちらか(もしくは両方)を更新すると、表示が崩れます。
    いずれも、Tree Shakingを無効にすると表示は正常になります。

    #73284

    石川@Vektor,Inc.
    キーマスター

    あぁ…概ね原因はわかりました。
    KUSANAGI固有の認証設定の問題のようで対応また検討してみます…。

14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • このトピックに返信するにはログインが必要です。