Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize bundle page UI #87

Merged
merged 1 commit into from
Jan 3, 2024
Merged

Optimize bundle page UI #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/components/src/components/CodeViewer/viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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` }}
Expand Down
9 changes: 5 additions & 4 deletions packages/components/src/pages/BundleSize/components/asset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -25,7 +25,8 @@ const TAB_MAP = {
};

const tagStyle = {
'margin': 'none'
'margin': 'none',
'marginInlineEnd': 0,
};

export const ModuleCodeViewer: React.FC<{ data: SDK.ModuleData }> = ({ data }) => {
Expand All @@ -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` }}
Expand Down Expand Up @@ -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>
);
Expand Down
60 changes: 57 additions & 3 deletions packages/components/src/pages/BundleSize/components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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>
Expand Down