@rsdoctor/components 1.5.2 → 1.5.3-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Charts/TreeMap.d.ts +1 -2
- package/dist/components/Charts/TreeMap.mjs +1 -14
- package/dist/components/Charts/TreeMap.mjs.map +1 -1
- package/dist/components/Loader/executions.mjs +138 -118
- package/dist/components/Loader/executions.mjs.map +1 -1
- package/dist/pages/BundleSize/components/index.mjs +390 -399
- package/dist/pages/BundleSize/components/index.mjs.map +1 -1
- package/dist/pages/BundleSize/components/index.module.mjs +0 -4
- package/dist/pages/BundleSize/components/index.module.mjs.map +1 -1
- package/dist/pages/BundleSize/components/index_module.css +0 -4
- package/dist/pages/BundleSize/components/index_module.css.map +1 -1
- package/package.json +6 -6
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { CodeOutlined, CodepenCircleOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from "@ant-design/icons";
|
|
3
3
|
import { SDK } from "@rsdoctor/types";
|
|
4
|
-
import { Button, Card, Col, Divider, Empty, InputNumber, Row, Select, Space, Tag, Tooltip, Typography } from "antd";
|
|
4
|
+
import { Button, Card, Col, Divider, Empty, InputNumber, Row, Select, Space, Tabs, Tag, Tooltip, Typography } from "antd";
|
|
5
5
|
import { debounce, sumBy } from "es-toolkit/compat";
|
|
6
6
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
7
7
|
import { useCodeDrawer } from "../../../components/base/CodeViewer/useCodeDrawer.mjs";
|
|
@@ -22,173 +22,6 @@ import { AssetTreemapWithFilter } from "../../../components/Charts/TreeMap.mjs";
|
|
|
22
22
|
import { Rspack } from "@rsdoctor/utils/common";
|
|
23
23
|
const { Option } = Select;
|
|
24
24
|
const cardBodyHeight = 600;
|
|
25
|
-
const tabList = [
|
|
26
|
-
{
|
|
27
|
-
key: 'tree',
|
|
28
|
-
label: /*#__PURE__*/ jsxs(Space, {
|
|
29
|
-
children: [
|
|
30
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
31
|
-
children: 'Tree Graph'
|
|
32
|
-
}),
|
|
33
|
-
/*#__PURE__*/ jsx(Tooltip, {
|
|
34
|
-
overlayStyle: {
|
|
35
|
-
maxWidth: 380
|
|
36
|
-
},
|
|
37
|
-
overlayInnerStyle: {
|
|
38
|
-
marginLeft: 16,
|
|
39
|
-
padding: 10
|
|
40
|
-
},
|
|
41
|
-
color: "white",
|
|
42
|
-
title: /*#__PURE__*/ jsxs(Space, {
|
|
43
|
-
direction: "vertical",
|
|
44
|
-
color: "white",
|
|
45
|
-
size: "middle",
|
|
46
|
-
children: [
|
|
47
|
-
/*#__PURE__*/ jsx(Row, {
|
|
48
|
-
children: /*#__PURE__*/ jsxs(Col, {
|
|
49
|
-
children: [
|
|
50
|
-
/*#__PURE__*/ jsx(Tag, {
|
|
51
|
-
color: "cyan",
|
|
52
|
-
style: {
|
|
53
|
-
margin: 0
|
|
54
|
-
},
|
|
55
|
-
children: "initial"
|
|
56
|
-
}),
|
|
57
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
58
|
-
style: {
|
|
59
|
-
marginLeft: 4
|
|
60
|
-
},
|
|
61
|
-
children: "Identify whether the chunk is an initial chunk."
|
|
62
|
-
})
|
|
63
|
-
]
|
|
64
|
-
})
|
|
65
|
-
}),
|
|
66
|
-
/*#__PURE__*/ jsx(Row, {
|
|
67
|
-
children: /*#__PURE__*/ jsxs(Col, {
|
|
68
|
-
children: [
|
|
69
|
-
/*#__PURE__*/ jsx(Tag, {
|
|
70
|
-
color: "green",
|
|
71
|
-
style: {
|
|
72
|
-
margin: 0
|
|
73
|
-
},
|
|
74
|
-
children: "concatenated"
|
|
75
|
-
}),
|
|
76
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
77
|
-
style: {
|
|
78
|
-
marginLeft: 4
|
|
79
|
-
},
|
|
80
|
-
children: "Identify whether the module is a concatenated module"
|
|
81
|
-
}),
|
|
82
|
-
/*#__PURE__*/ jsx(Tooltip, {
|
|
83
|
-
overlayStyle: {
|
|
84
|
-
maxWidth: 408
|
|
85
|
-
},
|
|
86
|
-
placement: "bottom",
|
|
87
|
-
color: "white",
|
|
88
|
-
title: /*#__PURE__*/ jsx(Space, {
|
|
89
|
-
direction: "vertical",
|
|
90
|
-
color: "white",
|
|
91
|
-
children: /*#__PURE__*/ jsx(Row, {
|
|
92
|
-
children: /*#__PURE__*/ jsxs(Col, {
|
|
93
|
-
children: [
|
|
94
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
95
|
-
strong: true,
|
|
96
|
-
children: "Concatenated Module"
|
|
97
|
-
}),
|
|
98
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
99
|
-
children: ': A performance optimization where multiple modules are merged (or "hoisted") into a single scope instead of wrapping each module in separate function closures. This reduces the bundle size and improves runtime performance by minimizing function call overhead.'
|
|
100
|
-
})
|
|
101
|
-
]
|
|
102
|
-
})
|
|
103
|
-
})
|
|
104
|
-
}),
|
|
105
|
-
children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
|
|
106
|
-
style: {
|
|
107
|
-
color: 'rgba(0,0,0,.45)',
|
|
108
|
-
marginLeft: 4
|
|
109
|
-
}
|
|
110
|
-
})
|
|
111
|
-
}),
|
|
112
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
113
|
-
children: "."
|
|
114
|
-
})
|
|
115
|
-
]
|
|
116
|
-
})
|
|
117
|
-
}),
|
|
118
|
-
/*#__PURE__*/ jsx(Row, {
|
|
119
|
-
children: /*#__PURE__*/ jsxs(Col, {
|
|
120
|
-
children: [
|
|
121
|
-
/*#__PURE__*/ jsx(Button, {
|
|
122
|
-
size: "small",
|
|
123
|
-
icon: /*#__PURE__*/ jsx(CodepenCircleOutlined, {})
|
|
124
|
-
}),
|
|
125
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
126
|
-
style: {
|
|
127
|
-
marginLeft: 4
|
|
128
|
-
},
|
|
129
|
-
children: "Open the code."
|
|
130
|
-
})
|
|
131
|
-
]
|
|
132
|
-
})
|
|
133
|
-
}),
|
|
134
|
-
/*#__PURE__*/ jsx(Row, {
|
|
135
|
-
children: /*#__PURE__*/ jsxs(Col, {
|
|
136
|
-
children: [
|
|
137
|
-
/*#__PURE__*/ jsx(Button, {
|
|
138
|
-
size: "small",
|
|
139
|
-
icon: /*#__PURE__*/ jsx(DeploymentUnitOutlined, {})
|
|
140
|
-
}),
|
|
141
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
142
|
-
style: {
|
|
143
|
-
marginLeft: 4
|
|
144
|
-
},
|
|
145
|
-
children: "View the module dependency, that is, module reasons in stats.json."
|
|
146
|
-
})
|
|
147
|
-
]
|
|
148
|
-
})
|
|
149
|
-
}),
|
|
150
|
-
/*#__PURE__*/ jsx(Row, {
|
|
151
|
-
children: /*#__PURE__*/ jsxs(Col, {
|
|
152
|
-
children: [
|
|
153
|
-
/*#__PURE__*/ jsx(Tag, {
|
|
154
|
-
color: 'purple',
|
|
155
|
-
children: 'Bundled: 15.77 KB'
|
|
156
|
-
}),
|
|
157
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
158
|
-
children: "The final size of the output files after processing, bundling, and optimization. This is what is delivered to the browser."
|
|
159
|
-
})
|
|
160
|
-
]
|
|
161
|
-
})
|
|
162
|
-
}),
|
|
163
|
-
/*#__PURE__*/ jsx(Row, {
|
|
164
|
-
children: /*#__PURE__*/ jsxs(Col, {
|
|
165
|
-
children: [
|
|
166
|
-
/*#__PURE__*/ jsx(Tag, {
|
|
167
|
-
color: 'orange',
|
|
168
|
-
children: 'Source: 60.46 KB'
|
|
169
|
-
}),
|
|
170
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
171
|
-
children: "The original size of your source code files before any processing or transformations. This is the raw size of your code as you wrote it."
|
|
172
|
-
})
|
|
173
|
-
]
|
|
174
|
-
})
|
|
175
|
-
})
|
|
176
|
-
]
|
|
177
|
-
}),
|
|
178
|
-
children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
|
|
179
|
-
style: {
|
|
180
|
-
color: 'rgba(0,0,0,.45)'
|
|
181
|
-
}
|
|
182
|
-
})
|
|
183
|
-
})
|
|
184
|
-
]
|
|
185
|
-
})
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
key: 'treemap',
|
|
189
|
-
label: 'Treemap'
|
|
190
|
-
}
|
|
191
|
-
];
|
|
192
25
|
const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints })=>{
|
|
193
26
|
const [selectedEntryPoints, setEntryPoints] = useState([]);
|
|
194
27
|
const [inputModule, setModuleValue] = useState(0);
|
|
@@ -198,7 +31,6 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints })=>{
|
|
|
198
31
|
const [inputModuleUnit, setModuleUnit] = useState('');
|
|
199
32
|
const [inputChunkUnit, setChunkUnit] = useState('');
|
|
200
33
|
const [assetPath, setAssetPath] = useState(null);
|
|
201
|
-
const [graphType, setGraphType] = useState('tree');
|
|
202
34
|
const { showCode, codeDrawerComponent } = useCodeDrawer('Do not have the codes of assets. If you use the lite or brief mode, there will have codes.');
|
|
203
35
|
const { t } = useI18n();
|
|
204
36
|
const assets = summary.all.total.files;
|
|
@@ -325,7 +157,6 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints })=>{
|
|
|
325
157
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
326
158
|
children: [
|
|
327
159
|
/*#__PURE__*/ jsxs("div", {
|
|
328
|
-
className: "bundle-size-card",
|
|
329
160
|
children: [
|
|
330
161
|
/*#__PURE__*/ jsx(BundleCards, {
|
|
331
162
|
cwd: cwd,
|
|
@@ -333,260 +164,420 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints })=>{
|
|
|
333
164
|
summary: summary
|
|
334
165
|
}),
|
|
335
166
|
/*#__PURE__*/ jsx(Card, {
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
onTabChange: (e)=>setGraphType(e),
|
|
340
|
-
hidden: 'tree' === graphType,
|
|
341
|
-
tabProps: {
|
|
342
|
-
size: 'middle'
|
|
343
|
-
},
|
|
344
|
-
children: /*#__PURE__*/ jsx(ServerAPIProvider, {
|
|
345
|
-
api: SDK.ServerAPI.API.GetProjectInfo,
|
|
346
|
-
children: (data)=>{
|
|
347
|
-
const { isRspack, hasSourceMap } = Rspack.checkSourceMapSupport(data.configs);
|
|
348
|
-
return /*#__PURE__*/ jsx(ServerAPIProvider, {
|
|
349
|
-
api: SDK.ServerAPI.API.GetSummaryBundles,
|
|
350
|
-
children: (data)=>{
|
|
351
|
-
const isTargetFileType = (filePath)=>{
|
|
352
|
-
const ext = filePath.toLowerCase().split('.').pop() || '';
|
|
353
|
-
return 'js' === ext || 'cjs' === ext || 'mjs' === ext || 'bundle' === ext || 'css' === ext || 'html' === ext;
|
|
354
|
-
};
|
|
355
|
-
const computedTreeData = data.filter((item)=>isTargetFileType(item.asset.path)).map((item)=>({
|
|
356
|
-
name: item.asset.path,
|
|
357
|
-
value: item.asset.size,
|
|
358
|
-
children: flattenTreemapData(item.modules).children
|
|
359
|
-
}));
|
|
360
|
-
return /*#__PURE__*/ jsx(AssetTreemapWithFilter, {
|
|
361
|
-
treeData: computedTreeData,
|
|
362
|
-
bundledSize: hasSourceMap || isRspack
|
|
363
|
-
});
|
|
364
|
-
}
|
|
365
|
-
});
|
|
167
|
+
styles: {
|
|
168
|
+
body: {
|
|
169
|
+
paddingTop: 0
|
|
366
170
|
}
|
|
367
|
-
})
|
|
368
|
-
}),
|
|
369
|
-
/*#__PURE__*/ jsx(Card, {
|
|
370
|
-
hidden: 'treemap' === graphType,
|
|
371
|
-
tabList: tabList,
|
|
372
|
-
activeTabKey: graphType,
|
|
373
|
-
onTabChange: (e)=>setGraphType(e),
|
|
374
|
-
tabProps: {
|
|
375
|
-
size: 'middle'
|
|
376
171
|
},
|
|
377
|
-
children: /*#__PURE__*/
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
value: selectedEntryPoints.map((e)=>e.name),
|
|
391
|
-
style: {
|
|
392
|
-
minWidth: 230,
|
|
393
|
-
width: 'auto',
|
|
394
|
-
maxWidth: 300
|
|
395
|
-
},
|
|
396
|
-
placeholder: 'filter assets by entry point',
|
|
397
|
-
onChange: (name)=>{
|
|
398
|
-
setEntryPoints(name.map((e)=>entryPoints.find((ep)=>ep.name === e)).filter(Boolean));
|
|
399
|
-
},
|
|
400
|
-
allowClear: true,
|
|
401
|
-
onClear: ()=>{
|
|
402
|
-
setEntryPoints([]);
|
|
172
|
+
children: /*#__PURE__*/ jsx(Tabs, {
|
|
173
|
+
size: "middle",
|
|
174
|
+
items: [
|
|
175
|
+
{
|
|
176
|
+
key: 'tree',
|
|
177
|
+
label: /*#__PURE__*/ jsxs(Space, {
|
|
178
|
+
children: [
|
|
179
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
180
|
+
children: "Tree Graph"
|
|
181
|
+
}),
|
|
182
|
+
/*#__PURE__*/ jsx(Tooltip, {
|
|
183
|
+
overlayStyle: {
|
|
184
|
+
maxWidth: 380
|
|
403
185
|
},
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
children: /*#__PURE__*/ jsx(Badge, {
|
|
408
|
-
label: e.name,
|
|
409
|
-
value: formatSize(e.size),
|
|
410
|
-
tooltip: e.name
|
|
411
|
-
})
|
|
412
|
-
})
|
|
413
|
-
}, e.name))
|
|
414
|
-
})
|
|
415
|
-
}) : null,
|
|
416
|
-
/*#__PURE__*/ jsx(Col, {
|
|
417
|
-
children: /*#__PURE__*/ jsx(KeywordInput, {
|
|
418
|
-
placeholder: "search asset by keyword",
|
|
419
|
-
onChange: onSearch
|
|
420
|
-
})
|
|
421
|
-
}),
|
|
422
|
-
/*#__PURE__*/ jsx(Col, {
|
|
423
|
-
span: 6,
|
|
424
|
-
children: /*#__PURE__*/ jsx(InputNumber, {
|
|
425
|
-
min: 0,
|
|
426
|
-
style: {
|
|
427
|
-
width: '95%'
|
|
186
|
+
overlayInnerStyle: {
|
|
187
|
+
marginLeft: 16,
|
|
188
|
+
padding: 10
|
|
428
189
|
},
|
|
429
|
-
|
|
190
|
+
color: "white",
|
|
191
|
+
title: /*#__PURE__*/ jsxs(Space, {
|
|
192
|
+
direction: "vertical",
|
|
193
|
+
color: "white",
|
|
194
|
+
size: "middle",
|
|
430
195
|
children: [
|
|
431
|
-
/*#__PURE__*/ jsx(
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
196
|
+
/*#__PURE__*/ jsx(Row, {
|
|
197
|
+
children: /*#__PURE__*/ jsxs(Col, {
|
|
198
|
+
children: [
|
|
199
|
+
/*#__PURE__*/ jsx(Tag, {
|
|
200
|
+
color: "cyan",
|
|
201
|
+
style: {
|
|
202
|
+
margin: 0
|
|
203
|
+
},
|
|
204
|
+
children: "initial"
|
|
205
|
+
}),
|
|
206
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
207
|
+
style: {
|
|
208
|
+
marginLeft: 4
|
|
209
|
+
},
|
|
210
|
+
children: "Identify whether the chunk is an initial chunk."
|
|
211
|
+
})
|
|
212
|
+
]
|
|
213
|
+
})
|
|
437
214
|
}),
|
|
438
|
-
/*#__PURE__*/ jsx(
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
215
|
+
/*#__PURE__*/ jsx(Row, {
|
|
216
|
+
children: /*#__PURE__*/ jsxs(Col, {
|
|
217
|
+
children: [
|
|
218
|
+
/*#__PURE__*/ jsx(Tag, {
|
|
219
|
+
color: "green",
|
|
220
|
+
style: {
|
|
221
|
+
margin: 0
|
|
222
|
+
},
|
|
223
|
+
children: "concatenated"
|
|
224
|
+
}),
|
|
225
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
226
|
+
style: {
|
|
227
|
+
marginLeft: 4
|
|
228
|
+
},
|
|
229
|
+
children: "Identify whether the module is a concatenated module"
|
|
230
|
+
}),
|
|
231
|
+
/*#__PURE__*/ jsx(Tooltip, {
|
|
232
|
+
overlayStyle: {
|
|
233
|
+
maxWidth: 408
|
|
234
|
+
},
|
|
235
|
+
placement: "bottom",
|
|
236
|
+
color: "white",
|
|
237
|
+
title: /*#__PURE__*/ jsx(Space, {
|
|
238
|
+
direction: "vertical",
|
|
239
|
+
color: "white",
|
|
240
|
+
children: /*#__PURE__*/ jsx(Row, {
|
|
241
|
+
children: /*#__PURE__*/ jsxs(Col, {
|
|
242
|
+
children: [
|
|
243
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
244
|
+
strong: true,
|
|
245
|
+
children: "Concatenated Module"
|
|
246
|
+
}),
|
|
247
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
248
|
+
children: ': A performance optimization where multiple modules are merged (or "hoisted") into a single scope instead of wrapping each module in separate function closures. This reduces the bundle size and improves runtime performance by minimizing function call overhead.'
|
|
249
|
+
})
|
|
250
|
+
]
|
|
251
|
+
})
|
|
252
|
+
})
|
|
253
|
+
}),
|
|
254
|
+
children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
|
|
255
|
+
style: {
|
|
256
|
+
color: 'rgba(0,0,0,.45)',
|
|
257
|
+
marginLeft: 4
|
|
258
|
+
}
|
|
259
|
+
})
|
|
260
|
+
}),
|
|
261
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
262
|
+
children: "."
|
|
263
|
+
})
|
|
264
|
+
]
|
|
265
|
+
})
|
|
266
|
+
}),
|
|
267
|
+
/*#__PURE__*/ jsx(Row, {
|
|
268
|
+
children: /*#__PURE__*/ jsxs(Col, {
|
|
269
|
+
children: [
|
|
270
|
+
/*#__PURE__*/ jsx(Button, {
|
|
271
|
+
size: "small",
|
|
272
|
+
icon: /*#__PURE__*/ jsx(CodepenCircleOutlined, {})
|
|
273
|
+
}),
|
|
274
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
275
|
+
style: {
|
|
276
|
+
marginLeft: 4
|
|
277
|
+
},
|
|
278
|
+
children: "Open the code."
|
|
279
|
+
})
|
|
280
|
+
]
|
|
281
|
+
})
|
|
282
|
+
}),
|
|
283
|
+
/*#__PURE__*/ jsx(Row, {
|
|
284
|
+
children: /*#__PURE__*/ jsxs(Col, {
|
|
285
|
+
children: [
|
|
286
|
+
/*#__PURE__*/ jsx(Button, {
|
|
287
|
+
size: "small",
|
|
288
|
+
icon: /*#__PURE__*/ jsx(DeploymentUnitOutlined, {})
|
|
289
|
+
}),
|
|
290
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
291
|
+
style: {
|
|
292
|
+
marginLeft: 4
|
|
293
|
+
},
|
|
294
|
+
children: "View the module dependency, that is, module reasons in stats.json."
|
|
295
|
+
})
|
|
296
|
+
]
|
|
297
|
+
})
|
|
298
|
+
}),
|
|
299
|
+
/*#__PURE__*/ jsx(Row, {
|
|
300
|
+
children: /*#__PURE__*/ jsxs(Col, {
|
|
301
|
+
children: [
|
|
302
|
+
/*#__PURE__*/ jsx(Tag, {
|
|
303
|
+
color: 'purple',
|
|
304
|
+
children: 'Bundled: 15.77 KB'
|
|
305
|
+
}),
|
|
306
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
307
|
+
children: "The final size of the output files after processing, bundling, and optimization. This is what is delivered to the browser."
|
|
308
|
+
})
|
|
309
|
+
]
|
|
310
|
+
})
|
|
311
|
+
}),
|
|
312
|
+
/*#__PURE__*/ jsx(Row, {
|
|
313
|
+
children: /*#__PURE__*/ jsxs(Col, {
|
|
314
|
+
children: [
|
|
315
|
+
/*#__PURE__*/ jsx(Tag, {
|
|
316
|
+
color: 'orange',
|
|
317
|
+
children: 'Source: 60.46 KB'
|
|
318
|
+
}),
|
|
319
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
320
|
+
children: "The original size of your source code files before any processing or transformations. This is the raw size of your code as you wrote it."
|
|
321
|
+
})
|
|
322
|
+
]
|
|
447
323
|
})
|
|
448
324
|
})
|
|
449
325
|
]
|
|
450
326
|
}),
|
|
451
|
-
|
|
452
|
-
|
|
327
|
+
children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
|
|
328
|
+
style: {
|
|
329
|
+
color: 'rgba(0,0,0,.45)'
|
|
330
|
+
}
|
|
331
|
+
})
|
|
453
332
|
})
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
333
|
+
]
|
|
334
|
+
}),
|
|
335
|
+
children: /*#__PURE__*/ jsxs(Space, {
|
|
336
|
+
direction: "vertical",
|
|
337
|
+
children: [
|
|
338
|
+
/*#__PURE__*/ jsxs(Row, {
|
|
339
|
+
align: "middle",
|
|
340
|
+
gutter: [
|
|
341
|
+
Size.BasePadding,
|
|
342
|
+
Size.BasePadding
|
|
343
|
+
],
|
|
344
|
+
children: [
|
|
345
|
+
entryPoints && entryPoints.length ? /*#__PURE__*/ jsx(Col, {
|
|
346
|
+
children: /*#__PURE__*/ jsx(Select, {
|
|
347
|
+
mode: "multiple",
|
|
348
|
+
value: selectedEntryPoints.map((e)=>e.name),
|
|
465
349
|
style: {
|
|
466
|
-
|
|
467
|
-
|
|
350
|
+
minWidth: 230,
|
|
351
|
+
width: 'auto',
|
|
352
|
+
maxWidth: 300
|
|
468
353
|
},
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
354
|
+
placeholder: 'filter assets by entry point',
|
|
355
|
+
onChange: (name)=>{
|
|
356
|
+
setEntryPoints(name.map((e)=>entryPoints.find((ep)=>ep.name === e)).filter(Boolean));
|
|
357
|
+
},
|
|
358
|
+
allowClear: true,
|
|
359
|
+
onClear: ()=>{
|
|
360
|
+
setEntryPoints([]);
|
|
361
|
+
},
|
|
362
|
+
children: entryPoints.map((e)=>/*#__PURE__*/ jsx(Select.Option, {
|
|
363
|
+
value: e.name,
|
|
364
|
+
children: /*#__PURE__*/ jsx(Space, {
|
|
365
|
+
children: /*#__PURE__*/ jsx(Badge, {
|
|
366
|
+
label: e.name,
|
|
367
|
+
value: formatSize(e.size),
|
|
368
|
+
tooltip: e.name
|
|
369
|
+
})
|
|
370
|
+
})
|
|
371
|
+
}, e.name))
|
|
372
|
+
})
|
|
373
|
+
}) : null,
|
|
374
|
+
/*#__PURE__*/ jsx(Col, {
|
|
375
|
+
children: /*#__PURE__*/ jsx(KeywordInput, {
|
|
376
|
+
placeholder: "search asset by keyword",
|
|
377
|
+
onChange: onSearch
|
|
378
|
+
})
|
|
379
|
+
}),
|
|
380
|
+
/*#__PURE__*/ jsx(Col, {
|
|
381
|
+
span: 6,
|
|
382
|
+
children: /*#__PURE__*/ jsx(InputNumber, {
|
|
383
|
+
min: 0,
|
|
473
384
|
style: {
|
|
474
|
-
|
|
385
|
+
width: '95%'
|
|
475
386
|
},
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
387
|
+
addonBefore: /*#__PURE__*/ jsxs(Space, {
|
|
388
|
+
children: [
|
|
389
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
390
|
+
style: {
|
|
391
|
+
fontSize: 14,
|
|
392
|
+
color: 'inherit'
|
|
393
|
+
},
|
|
394
|
+
children: "Asset Size"
|
|
395
|
+
}),
|
|
396
|
+
/*#__PURE__*/ jsx(Tooltip, {
|
|
397
|
+
title: t('filter the output assets which size is greater than the input value'),
|
|
398
|
+
style: {
|
|
399
|
+
marginLeft: 3
|
|
400
|
+
},
|
|
401
|
+
children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
|
|
402
|
+
style: {
|
|
403
|
+
color: 'rgba(0,0,0,.45)'
|
|
404
|
+
}
|
|
405
|
+
})
|
|
406
|
+
})
|
|
407
|
+
]
|
|
408
|
+
}),
|
|
409
|
+
onChange: (value)=>onChangeAsset(Number(value)),
|
|
410
|
+
addonAfter: selectAfter('chunk')
|
|
481
411
|
})
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
children: /*#__PURE__*/ jsx(SearchModal, {})
|
|
494
|
-
}),
|
|
495
|
-
/*#__PURE__*/ jsx(Row, {
|
|
496
|
-
align: "middle",
|
|
497
|
-
gutter: [
|
|
498
|
-
Size.BasePadding,
|
|
499
|
-
Size.BasePadding
|
|
500
|
-
],
|
|
501
|
-
children: /*#__PURE__*/ jsx(Col, {
|
|
502
|
-
span: 24,
|
|
503
|
-
children: filteredAssets.length ? /*#__PURE__*/ jsxs(Row, {
|
|
504
|
-
gutter: Size.BasePadding,
|
|
505
|
-
children: [
|
|
506
|
-
/*#__PURE__*/ jsx(Col, {
|
|
507
|
-
span: 6,
|
|
508
|
-
children: /*#__PURE__*/ jsx(Card, {
|
|
509
|
-
title: /*#__PURE__*/ jsxs(Space, {
|
|
510
|
-
children: [
|
|
511
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
512
|
-
children: t('Output Assets List')
|
|
513
|
-
}),
|
|
514
|
-
/*#__PURE__*/ jsx(Divider, {
|
|
515
|
-
type: "vertical"
|
|
516
|
-
}),
|
|
517
|
-
/*#__PURE__*/ jsx(Tooltip, {
|
|
518
|
-
title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
|
|
519
|
-
children: /*#__PURE__*/ jsxs(Typography.Text, {
|
|
520
|
-
type: "secondary",
|
|
412
|
+
}),
|
|
413
|
+
/*#__PURE__*/ jsx(Col, {
|
|
414
|
+
span: 6,
|
|
415
|
+
children: /*#__PURE__*/ jsx(InputNumber, {
|
|
416
|
+
min: 0,
|
|
417
|
+
style: {
|
|
418
|
+
width: '95%'
|
|
419
|
+
},
|
|
420
|
+
addonBefore: /*#__PURE__*/ jsxs(Space, {
|
|
421
|
+
children: [
|
|
422
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
521
423
|
style: {
|
|
522
|
-
fontSize:
|
|
523
|
-
|
|
424
|
+
fontSize: 14,
|
|
425
|
+
color: 'inherit'
|
|
524
426
|
},
|
|
427
|
+
children: "Module Size"
|
|
428
|
+
}),
|
|
429
|
+
/*#__PURE__*/ jsx(Tooltip, {
|
|
430
|
+
title: t('filter the modules which size is greater than the input value'),
|
|
431
|
+
style: {
|
|
432
|
+
marginLeft: 3
|
|
433
|
+
},
|
|
434
|
+
children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
|
|
435
|
+
style: {
|
|
436
|
+
color: 'rgba(0,0,0,.45)'
|
|
437
|
+
}
|
|
438
|
+
})
|
|
439
|
+
})
|
|
440
|
+
]
|
|
441
|
+
}),
|
|
442
|
+
onChange: (value)=>{
|
|
443
|
+
onChangeModule(Number(value));
|
|
444
|
+
},
|
|
445
|
+
addonAfter: selectAfter('module')
|
|
446
|
+
})
|
|
447
|
+
})
|
|
448
|
+
]
|
|
449
|
+
}),
|
|
450
|
+
/*#__PURE__*/ jsx(Row, {
|
|
451
|
+
children: /*#__PURE__*/ jsx(SearchModal, {})
|
|
452
|
+
}),
|
|
453
|
+
/*#__PURE__*/ jsx(Row, {
|
|
454
|
+
align: "middle",
|
|
455
|
+
gutter: [
|
|
456
|
+
Size.BasePadding,
|
|
457
|
+
Size.BasePadding
|
|
458
|
+
],
|
|
459
|
+
children: /*#__PURE__*/ jsx(Col, {
|
|
460
|
+
span: 24,
|
|
461
|
+
children: filteredAssets.length ? /*#__PURE__*/ jsxs(Row, {
|
|
462
|
+
gutter: Size.BasePadding,
|
|
463
|
+
children: [
|
|
464
|
+
/*#__PURE__*/ jsx(Col, {
|
|
465
|
+
span: 6,
|
|
466
|
+
children: /*#__PURE__*/ jsx(Card, {
|
|
467
|
+
title: /*#__PURE__*/ jsxs(Space, {
|
|
525
468
|
children: [
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
469
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
470
|
+
children: t('Output Assets List')
|
|
471
|
+
}),
|
|
472
|
+
/*#__PURE__*/ jsx(Divider, {
|
|
473
|
+
type: "vertical"
|
|
474
|
+
}),
|
|
475
|
+
/*#__PURE__*/ jsx(Tooltip, {
|
|
476
|
+
title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
|
|
477
|
+
children: /*#__PURE__*/ jsxs(Typography.Text, {
|
|
478
|
+
type: "secondary",
|
|
479
|
+
style: {
|
|
480
|
+
fontSize: 12,
|
|
481
|
+
fontWeight: 400
|
|
482
|
+
},
|
|
483
|
+
children: [
|
|
484
|
+
filteredAssets.length,
|
|
485
|
+
" /",
|
|
486
|
+
' ',
|
|
487
|
+
assets.length
|
|
488
|
+
]
|
|
489
|
+
})
|
|
490
|
+
}),
|
|
491
|
+
/*#__PURE__*/ jsx(Divider, {
|
|
492
|
+
type: "vertical"
|
|
493
|
+
}),
|
|
494
|
+
/*#__PURE__*/ jsx(Typography.Text, {
|
|
495
|
+
type: "secondary",
|
|
496
|
+
style: {
|
|
497
|
+
fontSize: 12,
|
|
498
|
+
fontWeight: 400
|
|
499
|
+
},
|
|
500
|
+
children: formatSize(sumBy(filteredAssets, (e)=>e.size))
|
|
501
|
+
})
|
|
529
502
|
]
|
|
530
|
-
})
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
/*#__PURE__*/ jsx(Typography.Text, {
|
|
536
|
-
type: "secondary",
|
|
537
|
-
style: {
|
|
538
|
-
fontSize: 12,
|
|
539
|
-
fontWeight: 400
|
|
503
|
+
}),
|
|
504
|
+
size: "small",
|
|
505
|
+
bodyStyle: {
|
|
506
|
+
overflow: 'scroll',
|
|
507
|
+
height: cardBodyHeight
|
|
540
508
|
},
|
|
541
|
-
children:
|
|
509
|
+
children: /*#__PURE__*/ jsx(FileTree, {
|
|
510
|
+
className: index_module.assets,
|
|
511
|
+
treeData: assetsStructures,
|
|
512
|
+
autoExpandParent: true,
|
|
513
|
+
defaultExpandAll: defaultExpandAll || filteredAssets.length <= 20
|
|
514
|
+
}, `tree_${inputAssetName}_${defaultExpandAll}`)
|
|
515
|
+
})
|
|
516
|
+
}),
|
|
517
|
+
/*#__PURE__*/ jsx(Col, {
|
|
518
|
+
span: 18,
|
|
519
|
+
children: assetPath ? /*#__PURE__*/ jsx(ServerAPIProvider, {
|
|
520
|
+
api: SDK.ServerAPI.API.GetAssetDetails,
|
|
521
|
+
body: {
|
|
522
|
+
assetPath
|
|
523
|
+
},
|
|
524
|
+
children: (details)=>/*#__PURE__*/ jsx(AssetDetail, {
|
|
525
|
+
asset: details.asset,
|
|
526
|
+
chunks: details.chunks,
|
|
527
|
+
modules: details.modules,
|
|
528
|
+
height: cardBodyHeight,
|
|
529
|
+
moduleSizeLimit: inputModule,
|
|
530
|
+
root: cwd
|
|
531
|
+
})
|
|
532
|
+
}) : /*#__PURE__*/ jsx(Card, {
|
|
533
|
+
bodyStyle: {
|
|
534
|
+
height: cardBodyHeight
|
|
535
|
+
},
|
|
536
|
+
children: /*#__PURE__*/ jsx(Empty, {
|
|
537
|
+
description: /*#__PURE__*/ jsx(Typography.Text, {
|
|
538
|
+
strong: true,
|
|
539
|
+
children: "Click the file path on the left to show the modules of the asset"
|
|
540
|
+
})
|
|
541
|
+
})
|
|
542
542
|
})
|
|
543
|
-
]
|
|
544
|
-
}),
|
|
545
|
-
size: "small",
|
|
546
|
-
bodyStyle: {
|
|
547
|
-
overflow: 'scroll',
|
|
548
|
-
height: cardBodyHeight
|
|
549
|
-
},
|
|
550
|
-
children: /*#__PURE__*/ jsx(FileTree, {
|
|
551
|
-
className: index_module.assets,
|
|
552
|
-
treeData: assetsStructures,
|
|
553
|
-
autoExpandParent: true,
|
|
554
|
-
defaultExpandAll: defaultExpandAll || filteredAssets.length <= 20
|
|
555
|
-
}, `tree_${inputAssetName}_${defaultExpandAll}`)
|
|
556
|
-
})
|
|
557
|
-
}),
|
|
558
|
-
/*#__PURE__*/ jsx(Col, {
|
|
559
|
-
span: 18,
|
|
560
|
-
children: assetPath ? /*#__PURE__*/ jsx(ServerAPIProvider, {
|
|
561
|
-
api: SDK.ServerAPI.API.GetAssetDetails,
|
|
562
|
-
body: {
|
|
563
|
-
assetPath
|
|
564
|
-
},
|
|
565
|
-
children: (details)=>/*#__PURE__*/ jsx(AssetDetail, {
|
|
566
|
-
asset: details.asset,
|
|
567
|
-
chunks: details.chunks,
|
|
568
|
-
modules: details.modules,
|
|
569
|
-
height: cardBodyHeight,
|
|
570
|
-
moduleSizeLimit: inputModule,
|
|
571
|
-
root: cwd
|
|
572
|
-
})
|
|
573
|
-
}) : /*#__PURE__*/ jsx(Card, {
|
|
574
|
-
bodyStyle: {
|
|
575
|
-
height: cardBodyHeight
|
|
576
|
-
},
|
|
577
|
-
children: /*#__PURE__*/ jsx(Empty, {
|
|
578
|
-
description: /*#__PURE__*/ jsx(Typography.Text, {
|
|
579
|
-
strong: true,
|
|
580
|
-
children: "Click the file path on the left to show the modules of the asset"
|
|
581
543
|
})
|
|
582
|
-
|
|
583
|
-
})
|
|
544
|
+
]
|
|
545
|
+
}) : /*#__PURE__*/ jsx(Empty, {})
|
|
584
546
|
})
|
|
585
|
-
|
|
586
|
-
|
|
547
|
+
})
|
|
548
|
+
]
|
|
587
549
|
})
|
|
588
|
-
}
|
|
589
|
-
|
|
550
|
+
},
|
|
551
|
+
{
|
|
552
|
+
key: 'treemap',
|
|
553
|
+
label: 'Treemap',
|
|
554
|
+
children: /*#__PURE__*/ jsx(ServerAPIProvider, {
|
|
555
|
+
api: SDK.ServerAPI.API.GetProjectInfo,
|
|
556
|
+
children: (data)=>{
|
|
557
|
+
const { isRspack, hasSourceMap } = Rspack.checkSourceMapSupport(data.configs);
|
|
558
|
+
return /*#__PURE__*/ jsx(ServerAPIProvider, {
|
|
559
|
+
api: SDK.ServerAPI.API.GetSummaryBundles,
|
|
560
|
+
children: (data)=>{
|
|
561
|
+
const isTargetFileType = (filePath)=>{
|
|
562
|
+
const ext = filePath.toLowerCase().split('.').pop() || '';
|
|
563
|
+
return 'js' === ext || 'cjs' === ext || 'mjs' === ext || 'bundle' === ext || 'css' === ext || 'html' === ext;
|
|
564
|
+
};
|
|
565
|
+
const computedTreeData = data.filter((item)=>isTargetFileType(item.asset.path)).map((item)=>({
|
|
566
|
+
name: item.asset.path,
|
|
567
|
+
value: item.asset.size,
|
|
568
|
+
children: flattenTreemapData(item.modules).children
|
|
569
|
+
}));
|
|
570
|
+
return /*#__PURE__*/ jsx(AssetTreemapWithFilter, {
|
|
571
|
+
treeData: computedTreeData,
|
|
572
|
+
bundledSize: hasSourceMap || isRspack
|
|
573
|
+
});
|
|
574
|
+
}
|
|
575
|
+
});
|
|
576
|
+
}
|
|
577
|
+
})
|
|
578
|
+
}
|
|
579
|
+
],
|
|
580
|
+
defaultActiveKey: "tree"
|
|
590
581
|
})
|
|
591
582
|
})
|
|
592
583
|
]
|