Skip to content

Commit b0212bb

Browse files
jekatigrjekatigr
committed
add examples
1 parent 2d76daf commit b0212bb

File tree

2 files changed

+111
-15
lines changed

2 files changed

+111
-15
lines changed

‎README.md‎

Lines changed: 110 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ module.exports = [
3232

3333
All parameters are optional.
3434

35-
| option | type | default | description |
36-
|----------------|--------------------------|-------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
37-
| outputFilename | `string` | `chunk_sizes.txt` | Report file name. |
38-
| outputFolder | `string` | Webpack's config output.path. | Report destination folder. |
39-
| overwrite | `boolean` | `true` | Overwrite file on report generation. |
40-
| customLabels | `Record<string, string>` | `{}` | Additional custom labels in format: { labelName1: value1, labelName2: value2 }. <br>Values will be appended in every entry's labels list. |
41-
| metricName | `string` | `chunk_size_<unit name>` | Metric custom name. <br>Default example: for unit = `kb` metric name will be `chunk_size_kilobytes`. |
42-
| chunkLabelName | `string` | `chunk` | Chunk label name. |
43-
| unit | `mb`, `kb`, `B` | `kb` | Units for metric output. Supported values: <br>- `mb` (megabytes) <br>- `kb` (kilobytes) <br>- `B` (bytes) |
35+
| option | type | default | description |
36+
|----------------|--------------------------|-------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
37+
| outputFilename | `string` | `chunk_sizes.txt` | Report file name. |
38+
| outputFolder | `string` | Webpack's config output.path. | Report destination folder. |
39+
| overwrite | `boolean` | `true` | Overwrite file on report generation. |
40+
| customLabels | `Record<string, string>` | `{}` | Additional custom labels in format: `{ labelName1: value1, labelName2: value2 }`. <br>Values will be appended in every entry's labels list. |
41+
| metricName | `string` | `chunk_size_<unit name>` | Metric custom name. <br>Default example: for unit = `kb` metric name will be `chunk_size_kilobytes`. |
42+
| chunkLabelName | `string` | `chunk` | Chunk label name. |
43+
| unit | `mb`, `kb`, `B` | `kb` | Units for metric output. Supported values: <br>- `mb` (megabytes) <br>- `kb` (kilobytes) <br>- `B` (bytes) |
4444

4545

4646
### Chunks labels
@@ -58,13 +58,109 @@ Possible solutions:
5858
Plugin will overwrite report file on every run by default. In case of several webpack configurations
5959
in one build use `overwrite = false` and remove report file before next build manually.
6060

61-
#### Report file example
61+
### Examples
62+
63+
Demo [configuration](https://github.com/MegafonWebLab/chunk-sizes-webpack-plugin/blob/master/example/webpack.config.js).
64+
65+
Includes two builds:
66+
1. entry (main) with lazily-loaded modules (chunkOne and chunkTwo)
67+
2. simple entry (myFavoriteEntry)
68+
69+
* <b>Note: option `overwrite: false` should be added in every example bellow because of two builds in one config.</b>
70+
71+
##### Defaults
72+
73+
```js
74+
// for both entries
75+
new ChunkSizesWebpackPlugin({
76+
overwrite: false,
77+
})
78+
```
79+
80+
```text
81+
chunk_size_kilobytes{chunk="main"} 2.88
82+
chunk_size_kilobytes{chunk="chunkTwo"} 0.09
83+
chunk_size_kilobytes{chunk="chunkOne"} 0.09
84+
chunk_size_kilobytes{chunk="myFavoriteEntry"} 0.08
85+
```
86+
87+
##### With custom labels
88+
89+
```js
90+
// main entry
91+
new ChunkSizesWebpackPlugin({
92+
overwrite: false,
93+
customLabels: {
94+
customLabel: 'custom-value',
95+
},
96+
})
97+
98+
// myFavoriteEntry
99+
new ChunkSizesWebpackPlugin({
100+
overwrite: false,
101+
customLabels: {
102+
bundle: 'myFavoriteBundle',
103+
},
104+
})
105+
106+
```
107+
108+
```text
109+
chunk_size_kilobytes{bundle="myFavoriteBundle",chunk="myFavoriteEntry"} 0.08
110+
chunk_size_kilobytes{customLabel="custom-value",chunk="main"} 2.88
111+
chunk_size_kilobytes{customLabel="custom-value",chunk="chunkTwo"} 0.09
112+
chunk_size_kilobytes{customLabel="custom-value",chunk="chunkOne"} 0.09
113+
```
114+
115+
##### With custom metric name
116+
117+
```js
118+
// for both entries
119+
new ChunkSizesWebpackPlugin({
120+
overwrite: false,
121+
metricName: 'custom_metric_name',
122+
})
123+
```
124+
125+
```text
126+
custom_metric_name{chunk="myFavoriteEntry"} 0.08
127+
custom_metric_name{chunk="main"} 2.88
128+
custom_metric_name{chunk="chunkTwo"} 0.09
129+
custom_metric_name{chunk="chunkOne"} 0.09
130+
```
131+
132+
##### With custom chunk label name
133+
134+
```js
135+
// for both entries
136+
new ChunkSizesWebpackPlugin({
137+
overwrite: false,
138+
chunkLabelName: 'particle',
139+
})
140+
```
141+
142+
```text
143+
chunk_size_kilobytes{particle="myFavoriteEntry"} 0.08
144+
chunk_size_kilobytes{particle="main"} 2.88
145+
chunk_size_kilobytes{particle="chunkTwo"} 0.09
146+
chunk_size_kilobytes{particle="chunkOne"} 0.09
147+
```
148+
149+
##### With bytes in unit
150+
151+
```js
152+
// for both entries
153+
new ChunkSizesWebpackPlugin({
154+
overwrite: false,
155+
unit: 'B',
156+
})
157+
```
62158

63159
```text
64-
chunk_size_kilobytes{bundle="someOtherPageBundle",chunk="myFavoriteChunk"} 0.08
65-
chunk_size_kilobytes{customLabel="custom-value",bundle="mainPageBundle",chunk="main"} 2.88
66-
chunk_size_kilobytes{customLabel="custom-value",bundle="mainPageBundle",chunk="chunkTwo"} 0.09
67-
chunk_size_kilobytes{customLabel="custom-value",bundle="mainPageBundle",chunk="chunkOne"} 0.09
160+
chunk_size_bytes{chunk="myFavoriteEntry"} 81
161+
chunk_size_bytes{chunk="main"} 2946
162+
chunk_size_bytes{chunk="chunkTwo"} 93
163+
chunk_size_bytes{chunk="chunkOne"} 92
68164
```
69165

70166
## Contributing

‎example/webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = [
2828
}, {
2929
context: EXAMPLE_DIRECTORY,
3030
entry: {
31-
myFavoriteChunk: './src/index2.js'
31+
myFavoriteEntry: './src/index2.js'
3232
},
3333
mode: 'production',
3434
output: {

0 commit comments

Comments
 (0)