feat: antd first-screen style loading

eosphoros-ai · Jan 4, 2024 · 0cd1837 · 0cd1837
1 parent 35578ce
commit 0cd1837
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 29 deletions.
diff --git a/web/genAntdCss.ts b/web/genAntdCss.ts
@@ -0,0 +1,36 @@
+import { createHash } from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import { extractStyle } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/lib/Cache';
+
+export type DoExtraStyleOptions = {
+  cache: Entity;
+  dir?: string;
+  baseFileName?: string;
+};
+export function doExtraStyle({ cache, dir = 'antd-output', baseFileName = 'antd.min' }: DoExtraStyleOptions) {
+  const baseDir = path.resolve(__dirname, '../../static/css');
+
+  const outputCssPath = path.join(baseDir, dir);
+
+  if (!fs.existsSync(outputCssPath)) {
+    fs.mkdirSync(outputCssPath, { recursive: true });
+  }
+
+  const css = extractStyle(cache, true);
+  if (!css) return '';
+
+  const md5 = createHash('md5');
+  const hash = md5.update(css).digest('hex');
+  const fileName = `${baseFileName}.${hash.substring(0, 8)}.css`;
+  const fullpath = path.join(outputCssPath, fileName);
+
+  const res = `_next/static/css/${dir}/${fileName}`;
+
+  if (fs.existsSync(fullpath)) return res;
+
+  fs.writeFileSync(fullpath, css);
+
+  return res;
+}
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
@@ -1,6 +1,45 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+import { doExtraStyle } from '../genAntdCss';
+
+interface Props {
+  currentUrl: string;
+}
+
+class MyDocument extends Document<Props> {
+  static async getInitialProps(ctx: DocumentContext) {
+    const cache = createCache();
+    let fileName = '';
+    const originalRenderPage = ctx.renderPage;
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) =>
+          (
+            <StyleProvider cache={cache}>
+              <App {...props} />
+            </StyleProvider>
+          ),
+      });
+    const initialProps = await Document.getInitialProps(ctx);
+    const currentUrl = ctx.req?.url;
+
+    fileName = doExtraStyle({
+      cache,
+    });
+
+    return {
+      ...initialProps,
+      currentUrl,
+      styles: (
+        <>
+          {initialProps.styles}
+          {/* 1.2 inject css */}
+          {fileName && <link rel="stylesheet" href={`/${fileName}`} />}
+        </>
+      ),
+    };
+  }
 
-class MyDocument extends Document {
   render() {
     return (
       <Html lang="en">

diff --git a/web/pages/chat/[scene]/[id].tsx b/web/pages/chat/[scene]/[id].tsx