perf(markdown): load katex css lazily via local FullMarkdown wrapper
core-ui no longer bundles katex.min.css (it would base64-inline ~1.4MB of fonts into the render-blocking global css). Wrap FullMarkdown locally to co-locate the katex stylesheet so it loads only in the routes that render math.
This commit is contained in:
@@ -0,0 +1,12 @@
|
|||||||
|
// Wrapper around core-ui's FullMarkdown that co-locates the KaTeX stylesheet.
|
||||||
|
//
|
||||||
|
// core-ui deliberately does NOT bundle katex.min.css (importing it there
|
||||||
|
// base64-inlines ~1.4MB of fonts into the shared, render-blocking index.css).
|
||||||
|
// Importing it here keeps the KaTeX CSS in the route chunk that actually
|
||||||
|
// renders math, so it loads lazily and never blocks first paint.
|
||||||
|
//
|
||||||
|
// Always import FullMarkdown from this module, not from '@gpustack/core-ui/markdown'.
|
||||||
|
import { FullMarkdown } from '@gpustack/core-ui/markdown';
|
||||||
|
import 'katex/dist/katex.min.css';
|
||||||
|
|
||||||
|
export default FullMarkdown;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
|
import FullMarkdown from '@/components/full-markdown';
|
||||||
import { BulbOutlined } from '@ant-design/icons';
|
import { BulbOutlined } from '@ant-design/icons';
|
||||||
import { AutoTooltip } from '@gpustack/core-ui';
|
import { AutoTooltip } from '@gpustack/core-ui';
|
||||||
import { FullMarkdown } from '@gpustack/core-ui/markdown';
|
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Button, Tag } from 'antd';
|
import { Button, Tag } from 'antd';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
|
import FullMarkdown from '@/components/full-markdown';
|
||||||
import { SimpleAudio } from '@gpustack/core-ui';
|
import { SimpleAudio } from '@gpustack/core-ui';
|
||||||
import { FullMarkdown } from '@gpustack/core-ui/markdown';
|
|
||||||
import { Input } from 'antd';
|
import { Input } from 'antd';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { FullMarkdown } from '@gpustack/core-ui/markdown';
|
import FullMarkdown from '@/components/full-markdown';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import '../../style/think-content.less';
|
import '../../style/think-content.less';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user