mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
1 line
9.2 KiB
JavaScript
1 line
9.2 KiB
JavaScript
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["29a82d71"],{"29a82d71":function(e,n,t){"use strict";t.d(n,"__esModule",{value:!0}),t.d(n,"texts",{enumerable:!0,get:function(){return a;}}),t("0c6c552b");let a=[{value:"There are two options for server-side rendering styles, each with advantages and disadvantages:",paraId:0},{value:"Inline mode",paraId:1},{value:": there is no need to request additional style files during rendering. The advantage is to reduce additional network requests. The disadvantage is that the HTML volume will increase and the speed of the first screen rendering will be affected. Relevant discussion: ",paraId:1},{value:"#39891",paraId:1},{value:"Whole export",paraId:1},{value:": The antd component is pre-baked and styled as a css file to be introduced in the page. The advantage is that when opening any page, the same set of css files will be reused just like the traditional css scheme to hit the cache. The disadvantage is that if there are multiple themes in the page, additional baking is required",paraId:1},{value:"Use ",paraId:2,tocIndex:0},{value:"@ant-design/cssinjs",paraId:2,tocIndex:0},{value:" to extract style:",paraId:2,tocIndex:0},{value:"import React from 'react';\nimport { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';\nimport type Entity from '@ant-design/cssinjs/es/Cache';\nimport { renderToString } from 'react-dom/server';\n\nconst App = () => {\n // SSR Render\n const cache = React.useMemo<Entity>(() => createCache(), []);\n const html = renderToString(\n <StyleProvider cache={cache}>\n <MyApp />\n </StyleProvider>,\n );\n\n // Grab style from cache\n const styleText = extractStyle(cache);\n\n // Mix with style\n return `\n <!DOCTYPE html>\n <html>\n <head>\n ${styleText}\n </head>\n <body>\n <div id=\"root\">${html}</div>\n </body>\n </html>\n `;\n};\n\nexport default App;\n",paraId:3,tocIndex:0},{value:"If you want to detach a style file into a css file, try the following schemes:",paraId:4,tocIndex:1},{value:"Installation dependency",paraId:5,tocIndex:1},{value:"npm install ts-node tslib cross-env --save-dev\n",paraId:6,tocIndex:1},{value:"Add ",paraId:7,tocIndex:1},{value:"tsconfig.node.json",paraId:7,tocIndex:1},{value:'{\n "compilerOptions": {\n "strictNullChecks": true,\n "module": "NodeNext",\n "jsx": "react",\n "esModuleInterop": true\n },\n "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]\n}\n',paraId:8,tocIndex:1},{value:"Add ",paraId:9,tocIndex:1},{value:"scripts/genAntdCss.tsx",paraId:9,tocIndex:1},{value:"// scripts/genAntdCss.tsx\nimport fs from 'fs';\nimport { extractStyle } from '@ant-design/static-style-extract';\n\nconst outputPath = './public/antd.min.css';\n\nconst css = extractStyle();\n\nfs.writeFileSync(outputPath, css);\n",paraId:10,tocIndex:1},{value:"If you want to use mixed themes or custom themes, you can use the following script:",paraId:11,tocIndex:1},{value:"import fs from 'fs';\nimport React from 'react';\nimport { extractStyle } from '@ant-design/static-style-extract';\nimport { ConfigProvider } from 'antd';\n\nconst outputPath = './public/antd.min.css';\n\nconst testGreenColor = '#008000';\nconst testRedColor = '#ff0000';\n\nconst css = extractStyle((node) => (\n <>\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: testGreenColor,\n },\n }}\n >\n {node}\n </ConfigProvider>\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: testGreenColor,\n },\n }}\n >\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: testRedColor,\n },\n }}\n >\n {node}\n </ConfigProvider>\n </ConfigProvider>\n </>\n));\n\nfs.writeFileSync(outputPath, css);\n",paraId:12,tocIndex:1},{value:"You can choose to execute this script before starting the development command or before compiling. Running this script will generate a full antd.min.css file directly in the specified directory of the current project (e.g. public).",paraId:13,tocIndex:1},{value:"Take Next.js for example\uFF08",paraId:14,tocIndex:1},{value:"example",paraId:14,tocIndex:1},{value:"\uFF09\uFF1A",paraId:14,tocIndex:1},{value:'// package.json\n{\n "scripts": {\n "dev": "next dev",\n "build": "next build",\n "start": "next start",\n "lint": "next lint",\n "predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",\n "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"\n }\n}\n',paraId:15,tocIndex:1},{value:"Then, you just need to import this file into the ",paraId:16,tocIndex:1},{value:"pages/_app.tsx",paraId:16,tocIndex:1},{value:" file:",paraId:16,tocIndex:1},{value:"import { StyleProvider } from '@ant-design/cssinjs';\nimport type { AppProps } from 'next/app';\n\nimport '../public/antd.min.css'; // add this line\nimport '../styles/globals.css';\n\nexport default function App({ Component, pageProps }: AppProps) {\n return (\n <StyleProvider hashPriority=\"high\">\n <Component {...pageProps} />\n </StyleProvider>\n );\n}\n",paraId:17,tocIndex:1},{value:"If you're using a custom theme for your project, try baking in the following ways:",paraId:18,tocIndex:2},{value:"import { extractStyle } from '@ant-design/static-style-extract';\nimport { ConfigProvider } from 'antd';\n\nconst cssText = extractStyle((node) => (\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: 'red',\n },\n }}\n >\n {node}\n </ConfigProvider>\n));\n",paraId:19,tocIndex:2},{value:"If you're using a mixed theme for your project, try baking in the following ways:",paraId:20,tocIndex:3},{value:"import { extractStyle } from '@ant-design/static-style-extract';\nimport { ConfigProvider } from 'antd';\n\nconst cssText = extractStyle((node) => (\n <>\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: 'green ',\n },\n }}\n >\n {node}\n </ConfigProvider>\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: 'blue',\n },\n }}\n >\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: 'red ',\n },\n }}\n >\n {node}\n </ConfigProvider>\n </ConfigProvider>\n </>\n));\n",paraId:21,tocIndex:3},{value:"More about static-style-extract, see ",paraId:22,tocIndex:3},{value:"static-style-extract",paraId:22,tocIndex:3},{value:".",paraId:22,tocIndex:3},{value:"// scripts/genAntdCss.tsx\nimport { createHash } from 'crypto';\nimport fs from 'fs';\nimport path from 'path';\nimport { extractStyle } from '@ant-design/cssinjs';\nimport type Entity from '@ant-design/cssinjs/lib/Cache';\n\nexport type DoExtraStyleOptions = {\n cache: Entity;\n dir?: string;\n baseFileName?: string;\n};\nexport function doExtraStyle({\n cache,\n dir = 'antd-output',\n baseFileName = 'antd.min',\n}: DoExtraStyleOptions) {\n const baseDir = path.resolve(__dirname, '../../static/css');\n\n const outputCssPath = path.join(baseDir, dir);\n\n if (!fs.existsSync(outputCssPath)) {\n fs.mkdirSync(outputCssPath, { recursive: true });\n }\n\n const css = extractStyle(cache, true);\n if (!css) return '';\n\n const md5 = createHash('md5');\n const hash = md5.update(css).digest('hex');\n const fileName = `${baseFileName}.${hash.substring(0, 8)}.css`;\n const fullpath = path.join(outputCssPath, fileName);\n\n const res = `_next/static/css/${dir}/${fileName}`;\n\n if (fs.existsSync(fullpath)) return res;\n\n fs.writeFileSync(fullpath, css);\n\n return res;\n}\n",paraId:23,tocIndex:4},{value:"Export on demand using the above tools in ",paraId:24,tocIndex:4},{value:"_document.tsx",paraId:24,tocIndex:4},{value:"// _document.tsx\nimport { createCache, StyleProvider } from '@ant-design/cssinjs';\nimport type { DocumentContext } from 'next/document';\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\n\nimport { doExtraStyle } from '../scripts/genAntdCss';\n\nexport default class MyDocument extends Document {\n static async getInitialProps(ctx: DocumentContext) {\n const cache = createCache();\n let fileName = '';\n const originalRenderPage = ctx.renderPage;\n ctx.renderPage = () =>\n originalRenderPage({\n enhanceApp: (App) => (props) => (\n <StyleProvider cache={cache}>\n <App {...props} />\n </StyleProvider>\n ),\n });\n\n const initialProps = await Document.getInitialProps(ctx);\n // 1.1 extract style which had been used\n fileName = doExtraStyle({\n cache,\n });\n return {\n ...initialProps,\n styles: (\n <>\n {initialProps.styles}\n {/* 1.2 inject css */}\n {fileName && <link rel=\"stylesheet\" href={`/${fileName}`} />}\n </>\n ),\n };\n }\n\n render() {\n return (\n <Html lang=\"en\">\n <Head />\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n );\n }\n}\n",paraId:25,tocIndex:4},{value:"See the demo\uFF1A",paraId:26,tocIndex:4},{value:"Export the css files on demand demo",paraId:26,tocIndex:4}];}}]); |