Skip to content

Commit f8762ac

Browse files
v0.2.0
Change the default output from "json", to "human" And make the README a bit shinier
2 parents 93089d1 + 72a5c8c commit f8762ac

5 files changed

Lines changed: 285 additions & 63 deletions

File tree

README.md

Lines changed: 63 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,36 @@
1-
<div align="center"><h1>Speed Measure Plugin</h1></div>
1+
<div align="center">
2+
<img width="120" height="120" src="logo.svg">
3+
<h1>
4+
Speed Measure Plugin
5+
<div><em><sup><sub>(for webpack)</sub></sup></em></div>
6+
</h1>
7+
</div>
28
<br>
39

10+
The first step to optimising your webpack build speed, is to know where to focus your attention.
11+
412
This plugin measures your webpack build speed, giving an output like this:
513

614
![Preview of Speed Measure Plugin's output](preview.png)
715

8-
# Getting Started
16+
## Install
17+
18+
```bash
19+
npm install --save speed-measure-webpack-plugin
20+
```
21+
22+
or
923

10-
`npm install --save speed-measure-webpack-plugin`
24+
```bash
25+
yarn add speed-measure-webpack-plugin
26+
```
27+
28+
## Usage
1129

1230
Change your webpack config from
1331

1432
```javascript
15-
{
16-
entry: {/*...*/},
17-
output: {/*...*/},
18-
module: {/*...*/},
33+
const webpackConfig = {
1934
plugins: [
2035
new MyPlugin(),
2136
new MyOtherPlugin()
@@ -28,84 +43,74 @@ to
2843
```javascript
2944
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
3045

31-
{
32-
entry: {/*...*/},
33-
output: {/*...*/},
34-
module: {/*...*/},
46+
const webpackConfig = {
3547
plugins: SpeedMeasurePlugin.wrapPlugins({
3648
MyPlugin: new MyPlugin(),
3749
MyOtherPlugin: new MyOtherPlugin()
3850
})
3951
}
4052
```
4153

42-
Or you can also specify config:
54+
If you're using `webpack-merge`, then you can do:
4355

4456
```javascript
45-
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
57+
const smp = new SpeedMeasurePlugin();
4658

47-
{
48-
entry: {/*...*/},
49-
output: {/*...*/},
50-
module: {/*...*/},
51-
plugins: SpeedMeasurePlugin.wrapPlugins({
52-
MyPlugin: new MyPlugin(),
59+
const baseConfig = {
60+
plugins: smp.wrapPlugins({
61+
MyPlugin: new MyPlugin()
62+
}).concat(smp)
63+
// ^ note the `.concat(smp)`
64+
};
65+
66+
const envSpecificConfig = {
67+
plugins: smp.wrapPlugins({
5368
MyOtherPlugin: new MyOtherPlugin()
54-
}, {
55-
outputFormat: "human",
56-
outputTarget: "myFile.txt"
5769
})
70+
// ^ note no `.concat(smp)`
5871
}
72+
73+
const finalWebpackConfig = webpackMerge([
74+
baseConfig,
75+
envSpecificConfig
76+
]);
77+
5978
```
6079

61-
If you're using `webpack-merge`, then you can do:
80+
## Options
81+
82+
Options are passed in to the constructor
6283

6384
```javascript
64-
// base config file
65-
const smp = new SpeedMeasurePlugin({
66-
outputFormat: "human"
67-
});
68-
69-
const finalConfig = webpackMerge(
70-
[baseConfig, envSpecificConfig].map(configGenerator =>
71-
configGenerator({
72-
smp,
73-
// other options
74-
})
75-
)
76-
);
77-
78-
// baseConfig
79-
export const baseConfig = ({ smp }) => ({
80-
plugins: smp.wrapPlugins({
81-
MyPlugin: new MyPlugin()
82-
}).concat(smp)
83-
})
85+
const smp = new SpeedMeasurePlugin(options);
86+
```
8487

85-
// envSpecificConfig
86-
export const envSpecificConfig = ({ smp }) => ({
87-
plugins: smp.wrapPlugins({
88-
MyOtherPlugin: new MyOtherPlugin()
89-
})
90-
})
88+
or as the second argument to the static `wrapPlugins`
89+
90+
```javascript
91+
SpeedMeasurePlugin.wrapPlugins(pluginMap, options);
9192
```
9293

93-
## `outputFormat` ##
94+
### `options.outputFormat`
95+
96+
Type: `String`<br>
97+
Default: `"human"`
9498

95-
(default `"json"`)
99+
Determines in what format this plugin prints its measurements
96100

97101
* `"json"` - produces a JSON blob
98102
* `"human"` - produces a human readable output
99103

100-
## `outputTarget` ##
104+
### `options.outputTarget`
101105

102-
(default `null`)
106+
Type: `String`<br>
107+
Default: `undefined`
103108

104-
* `null` - prints to `console.log`
105-
* `"foo"` - prints (and makes, if no file exists) to the file at location `"foo"`
109+
Specifies the path to a file to output to. If undefined, then output will print to `console.log`
106110

107-
## `disable` ##
111+
### `options.disable`
108112

109-
(default `null`)
113+
Type: `Boolean`<br>
114+
Default: `false`
110115

111-
If truthy, this plugin does nothing at all (recommended by default)
116+
If truthy, this plugin does nothing at all. It is recommended to set this with something similar to `{ disable: !process.env.MEASURE }` to allow opt-in measurements with a `MEASURE=true npm run build`

index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ module.exports = class SpeedMeasurePlugin {
5555
if (this.timeEventData.loaders)
5656
outputObj.loaders = getLoadersOutput(this.timeEventData.loaders);
5757

58-
return this.options.outputFormat === "human"
59-
? getHumanOutput(outputObj)
60-
: JSON.stringify(outputObj, null, 2);
58+
return this.options.outputFormat === "json"
59+
? JSON.stringify(outputObj, null, 2)
60+
: getHumanOutput(outputObj);
6161
}
6262

6363
addTimeEvent(category, event, eventType, data = {}) {

0 commit comments

Comments
 (0)