22 |
23 | ### Contributing and Issues
24 | We are always looking to improve. If there are any contributions or issues you have, please check out our documentation to submit.
25 |
26 | #### Release Notes
27 | Created by: Courtney Kwong, Jackie Lin, Olga Naumova, Rachel Park
28 | snAppy
117 |118 | {CurrentComponent} 119 |
Loading..
64 | :
98 |
106 | 
107 |
108 | }
109 |
110 | if (this.state.initialBundleStats && this.state.postBundleStats) {
111 | CurrentComponent =
107 |
116 |
118 | {CurrentComponent} 119 |
120 | );
121 | }
122 |
123 | }
--------------------------------------------------------------------------------
/src/views/components/Assets.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | // import '../../style/styles.css'
3 |
4 | interface Asset {
5 | name: string;
6 | size: number;
7 | chunks: number[];
8 | chunkNames: string[];
9 | }
10 |
11 | interface Props {
12 | initialBundleStats: Asset[];
13 | entry: string;
14 | optFunc:any;
15 | }
16 |
17 | export default class Assets extends React.Component118 | {CurrentComponent} 119 |
Bundled Asset(s): Size
28 |
29 | {initialBundleStats.map((asset:Asset)=>
32 | {`${asset.name}: ${asset.size} KiB`}
)}
30 |
31 | 33 | 34 | ); 35 | } 36 | } 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/views/components/Form.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | // import '../../style/styles.css'; 3 | 4 | interface State { 5 | css: boolean; 6 | jsx: boolean; 7 | less: boolean; 8 | sass: boolean; 9 | tsx: boolean; 10 | } 11 | 12 | 13 | interface Props { 14 | runFunc: any; 15 | entryFunc: any; 16 | entry: string; 17 | } 18 | export default class Form extends React.Component
135 |
158 |
159 |
160 | );
161 | }
162 |
163 |
164 |
165 |
166 | }
--------------------------------------------------------------------------------
/src/views/components/Visualizations.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import LiquidGauges from './visuals/LiquidGauges';
3 | // import '../../style/styles.css'
4 |
5 | interface Asset {
6 | name: string;
7 | size: number;
8 | chunks: number[];
9 | chunkNames: string[];
10 | }
11 |
12 | interface Props {
13 | initialBundleStats: Asset[];
14 | postBundleStats: Asset[];
15 | exportFunc: any;
16 | }
17 |
18 | interface MainBundle {
19 | initial: number;
20 | post: number;
21 | percentDecrease: number;
22 | }
23 | class Visualizations extends React.Component
53 |
56 |
64 | 65 |
66 | );
67 | }
68 | }
69 |
70 | export default Visualizations;
--------------------------------------------------------------------------------
/src/views/components/visuals/LiquidGauges.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {loadLiquidFillGauge, liquidFillGaugeDefaultSettings} from '../../../functions/loadLiquidGauge';
3 |
4 | interface Asset {
5 | name: string;
6 | size: number;
7 | }
8 |
9 | interface Props {
10 | initialBundleStats: Asset[];
11 | postBundleStats: Asset[];
12 | }
13 |
14 | interface MainBundle {
15 | initial: number;
16 | post: number;
17 | }
18 |
19 | const LiquidGauges: React.FCStats:
54 |Before/After of Main Bundle (kiB):
55 |{`Initial Bundle: ${mainBundle.initial} | Optimized Bundle: ${mainBundle.post}`}
57 |{mainBundle.percentDecrease}%
58 |decrease from initial bundle to optimized bundle
59 |Assets and Chunks:
60 |
61 | {this.props.postBundleStats.map((asset:Asset)=>
63 | {`${asset.name}: ${asset.size} KiB`}
)}
62 | 64 | 65 |