optimize(client): optimize bundle page cards

web-infra-dev · Jan 3, 2024 · 8cc2bba · 8cc2bba
1 parent f63c20c
commit 8cc2bba
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 9 deletions.
diff --git a/packages/components/src/components/CodeViewer/viewer.tsx b/packages/components/src/components/CodeViewer/viewer.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { SDK } from '@rsdoctor/types';
 import Editor, { OnMount } from '@monaco-editor/react';
 import { isNumber } from 'lodash-es';
-import { CodepenOutlined } from '@ant-design/icons';
+import { CodepenCircleOutlined } from '@ant-design/icons';
 import type { editor } from 'monaco-editor';
 import { getOriginalLanguage, getSelectionRange } from '../../utils';
 import { DefaultEditorConfig } from './config';
@@ -55,7 +55,7 @@ export const CodeViewerWithDrawer: React.FC<CodeViewerProps> = (props) => {
       text=""
       buttonProps={{
         size: 'small',
-        icon: <CodepenOutlined />,
+        icon: <CodepenCircleOutlined />,
         type: 'default',
       }}
       buttonStyle={{ padding: `0 4px` }}

diff --git a/packages/components/src/pages/BundleSize/components/asset.tsx b/packages/components/src/pages/BundleSize/components/asset.tsx
@@ -1,4 +1,4 @@
-import { CodepenOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { CodepenCircleOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import Editor from '@monaco-editor/react';
 import { SDK } from '@rsdoctor/types';
 import { Button, Card, Col, Divider, Drawer, Empty, Popover, Row, Space, Tag, Tooltip, Typography } from 'antd';
@@ -25,7 +25,8 @@ const TAB_MAP = {
 };
 
 const tagStyle = {
-  'margin': 'none'
+  'margin': 'none',
+  'marginInlineEnd': 0,
 };
 
 export const ModuleCodeViewer: React.FC<{ data: SDK.ModuleData }> = ({ data }) => {
@@ -46,7 +47,7 @@ export const ModuleCodeViewer: React.FC<{ data: SDK.ModuleData }> = ({ data }) =
       text=""
       buttonProps={{
         size: 'small',
-        icon: <CodepenOutlined />,
+        icon: <CodepenCircleOutlined />,
         type: 'default',
       }}
       buttonStyle={{ padding: `0 4px` }}
@@ -384,7 +385,7 @@ export const AssetDetail: React.FC<{
             <Space>
               <Typography.Text>{defaultTitle}</Typography.Text>
               {parsedSize > 0 ? (
-                <Tag color={'orange'}>{'Parsed:' + formatSize(parsedSize)}</Tag>
+                <Tag style={tagStyle} color={'orange'}>{'Parsed:' + formatSize(parsedSize)}</Tag>
               ) : null}
             </Space>
           );

diff --git a/packages/components/src/pages/BundleSize/components/index.tsx b/packages/components/src/pages/BundleSize/components/index.tsx
@@ -1,4 +1,4 @@
-import { ColumnHeightOutlined, InfoCircleOutlined, VerticalAlignMiddleOutlined } from '@ant-design/icons';
+import { CodepenCircleOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined, VerticalAlignMiddleOutlined } from '@ant-design/icons';
 import { Client, SDK } from '@rsdoctor/types';
 import {
   Button,
@@ -205,8 +205,62 @@ export const WebpackModulesOverallBase: React.FC<WebpackModulesOverallProps> = (
           <Space>
             <Title text="Bundle Analysis" />
             <Tooltip
-              title={t('filter the modules which size is greater than the input value')}
-              style={{ marginLeft: 3 }}
+              color={'white'}
+              title={
+                <Space direction='vertical' color='white'>
+                  <Row>
+                    <Col>
+                      <Tag color="cyan" style={{ margin: 0 }}>
+                        initial
+                      </Tag>
+                      <Typography.Text>: Indignify whether the chunk is the initial chunk.</Typography.Text>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col>
+                      <Tag color="green">concatenated</Tag>
+                      <Typography.Text>: Indignify whether the module is the concatenated module.  </Typography.Text>
+                      <br />
+                      <Typography.Text strong>Concatenated Module:</Typography.Text>
+                      <Typography.Text>A series module is to lift or series multiple modules into a closure when packaging. </Typography.Text>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col>
+                      <Button
+                        size="small"
+                        icon={<CodepenCircleOutlined />}
+                      />
+                      <Typography.Text>: Open the code.</Typography.Text>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col>
+                      <Button
+                        size="small"
+                        icon={<DeploymentUnitOutlined />}
+                      />
+                      <Typography.Text>: View the module dependency, that is, module reasons in stats.json.</Typography.Text>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col>
+                      <Tag color={'purple'} >{'Parsed: 15.77 KB'}</Tag> 
+                      <Typography.Text strong>Parsed Size</Typography.Text>
+                      <Typography.Text>The size of the code which bundled. That is, after bundle and tree-shaking.</Typography.Text>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col>
+                      <Tag color={'orange'} >{'Source: 15.77 KB'}</Tag> 
+                      <Typography.Text strong>Source Size</Typography.Text>
+                      <Typography.Text>The size of the code which before bundle and transform.</Typography.Text>
+                    </Col>
+                  </Row>
+                </Space>
+
+              }
+              style={{ marginLeft: 3, }}
             >
               <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
             </Tooltip>