IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)

css-vars-ポニーフィル

CSS 変数を使用して Web ページのスキニングを実現すると、互換性の問題が発生する可能性があります。

IE、QQ、Baiduブラウザなどの互換性問題を解決するために、css-vars-ponyfillが導入されました。しかし、IEブラウザでは、css-vars-ponyfillはnextjsでのパフォーマンスが低下します。主な欠陥は、ページがサーバー側でレンダリングされるため、ユーザーがインターフェイスを見た後、動的なテーマカラーやその他のスタイルをすばやくレンダリングできず、遷移時間があり（css-vars-ponyfillはクライアント側のみをサポート）、明らかな色の置き換えプロセスが発生し、ユーザーエクスペリエンスが低下します。ソース コードを読むと、cssVars はブラウザー コンテンツが読み込まれるまで待機してからトリガーされる必要があることがわかります。そうしないと、dom のデータ コンテンツ イベントをリッスンし続けることになり、エクスペリエンス上の問題が発生します。

解決

1. 解析速度

document.readyState !== 'loading'の制約条件を直接削除することで、ブラウザはそれを解析し、css-vars-ponyfill の導入方法を変更することができます (以前の導入方法は、nextjs の mainjs にモジュールを導入し、cssVars() を直接呼び出すことでした。この方法では、ponyfill スクリプトを呼び出す前に、他の無関係なチャンクが解析されます。css 変数をより速く解析するには、挿入位置を手動で選択する必要があります)。変更された css-vars-ponyfill は、css 変数の場所を見つけ (nextjs はヘッダー内のさまざまなコンポーネントの下にスタイルをパッケージ化します)、変更された ponyfill を呼び出し用のスタイルに挿入します。この手順は、サーバー上でレンダリングされる_document.tsxファイルで変更されます。

2. 分析の安定性

ファイルの解析場所を手動で変更し、ソースコードの条件トリガーメカニズムに関連する変更を加えることで、ホームページのカラーレンダリング速度がある程度向上しました。しかし、まだ問題があります。つまり、ルートジャンプインターフェースを通じて新しいスタイルチャンクが挿入されると、効果的な CSS 変数解析が実行できません (MutationObserver をオンにするために cssVars オプションを設定しようとしました)。

したがって、解決策は、IE などのブラウザー内のすべてのルートを a タグを介してリダイレクトし、css-ponyfill の再解析と実行をトリガーできるように UA を決定することです。

エクスポート関数ブラウザ() {
  定数 UA = window.navigator.userAgent
  if (UA.includes("qqbrowser")) は "qqbrowser" を返します
  if (UA.includes("baidu")) は "baidu" を返します
  if (UA.includes("Opera")) は "Opera" を返します
  if (UA.includes("Edge")) は "Edge" を返します
  (UA.includes("MSIE") || (UA.includes("Trident") && UA.includes("rv:11.0")) の場合
    「IE」を返す
  if (UA.includes("Firefox")) は "Firefox" を返します
  if (UA.includes("Chrome")) は "Chrome" を返します
  if (UA.includes("Safari")) は "Safari" を返します
}

タイプ CommonLinkProps = {
    子: ReactElement
    href?: 文字列
    ターゲット?: 文字列
    アウターリンク?: ブール値
    スタイル: 不明
}
デフォルトの関数 CustomLink(props: CommonLinkProps) をエクスポートします。
  const { children, href, target, as, outerLink, styles = emptyStyles } = props
  const [isIE, setIE] = useState<boolean>(false)
  const cloneEl = (c: ReactElement、props?: any) =>
    React.cloneElement(c, { href: ?? href, target, ...props }) の複製
  使用効果(() => {
    if (["IE", "qqbrowser", "baidu"].includes(browser())) {
      IEをtrueに設定する
    }
  }, [])
  関数renderLink() {
    （Children.only(children).type === "a")の場合{
      const ノード = cloneEl(ReactElement の子)
      戻りノード
    } それ以外 {
      fn: () => void | null = null とします
      if (アウターリンク) {
        関数 = () => {
          window.open(?? href として)
        }
      } それ以外 {
        関数 = () => {
          window.location.href = ??href として
        }
      }
      const node = cloneEl(children as ReactElement, {
        クリック時: () => {
          関数()
        },
      })
      戻りノード
    }
  }

  戻る （
    <>
      {!href ? (
        子供たち
      ) : isIE ? (
        レンダリングリンク()
      ) : (
        <リンク {...props}>{children}</リンク>
      )}
      <style jsx>{スタイル}</style>
    </>
  ）
}

ここで、 children の型は、スロットで通常サポートされているReactNodeではなく、 ReactElementです。これは主に、文字列を直接挿入する状況を考慮したくないためです。文字列を直接挿入すると、問題の複雑さが増します。したがって、型レベルで直接制限します。フラグメントは考慮されず、有効なフラグメントタイプが見つからないため、ReactNode で省略できません。フラグメントが最初のレイヤーに挿入されると、nextjs 内のリンクが正常にジャンプできません。フラグメントに有効なイベントをバインドできないことが原因である可能性があります。現在、フラグメント (16.13.1) はキー属性のみをサポートしています。後で最適化されることを期待しています。

要約する

IE 環境 (nextjs ビルド) での css-vars-ponyfill の使用に関する記事はこれで終了です。より関連性の高い css-vars-ponyfill の使用コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。