Skip to content

Commit

Permalink
v0.2.0
Browse files Browse the repository at this point in the history
Change the default output from "json", to "human"
And make the README a bit shinier
  • Loading branch information
stephencookdev committed Feb 3, 2018
2 parents 93089d1 + 72a5c8c commit f8762ac
Show file tree
Hide file tree
Showing 5 changed files with 285 additions and 63 deletions.
121 changes: 63 additions & 58 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,36 @@
<div align="center"><h1>Speed Measure Plugin</h1></div>
<div align="center">
<img width="120" height="120" src="logo.svg">
<h1>
Speed Measure Plugin
<div><em><sup><sub>(for webpack)</sub></sup></em></div>
</h1>
</div>
<br>

The first step to optimising your webpack build speed, is to know where to focus your attention.

This plugin measures your webpack build speed, giving an output like this:

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

# Getting Started
## Install

```bash
npm install --save speed-measure-webpack-plugin
```

or

`npm install --save speed-measure-webpack-plugin`
```bash
yarn add speed-measure-webpack-plugin
```

## Usage

Change your webpack config from

```javascript
{
entry: {/*...*/},
output: {/*...*/},
module: {/*...*/},
const webpackConfig = {
plugins: [
new MyPlugin(),
new MyOtherPlugin()
Expand All @@ -28,84 +43,74 @@ to
```javascript
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

{
entry: {/*...*/},
output: {/*...*/},
module: {/*...*/},
const webpackConfig = {
plugins: SpeedMeasurePlugin.wrapPlugins({
MyPlugin: new MyPlugin(),
MyOtherPlugin: new MyOtherPlugin()
})
}
```

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

```javascript
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

{
entry: {/*...*/},
output: {/*...*/},
module: {/*...*/},
plugins: SpeedMeasurePlugin.wrapPlugins({
MyPlugin: new MyPlugin(),
const baseConfig = {
plugins: smp.wrapPlugins({
MyPlugin: new MyPlugin()
}).concat(smp)
// ^ note the `.concat(smp)`
};

const envSpecificConfig = {
plugins: smp.wrapPlugins({
MyOtherPlugin: new MyOtherPlugin()
}, {
outputFormat: "human",
outputTarget: "myFile.txt"
})
// ^ note no `.concat(smp)`
}

const finalWebpackConfig = webpackMerge([
baseConfig,
envSpecificConfig
]);

```

If you're using `webpack-merge`, then you can do:
## Options

Options are passed in to the constructor

```javascript
// base config file
const smp = new SpeedMeasurePlugin({
outputFormat: "human"
});

const finalConfig = webpackMerge(
[baseConfig, envSpecificConfig].map(configGenerator =>
configGenerator({
smp,
// other options
})
)
);

// baseConfig
export const baseConfig = ({ smp }) => ({
plugins: smp.wrapPlugins({
MyPlugin: new MyPlugin()
}).concat(smp)
})
const smp = new SpeedMeasurePlugin(options);
```

// envSpecificConfig
export const envSpecificConfig = ({ smp }) => ({
plugins: smp.wrapPlugins({
MyOtherPlugin: new MyOtherPlugin()
})
})
or as the second argument to the static `wrapPlugins`

```javascript
SpeedMeasurePlugin.wrapPlugins(pluginMap, options);
```

## `outputFormat` ##
### `options.outputFormat`

Type: `String`<br>
Default: `"human"`

(default `"json"`)
Determines in what format this plugin prints its measurements

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

## `outputTarget` ##
### `options.outputTarget`

(default `null`)
Type: `String`<br>
Default: `undefined`

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

## `disable` ##
### `options.disable`

(default `null`)
Type: `Boolean`<br>
Default: `false`

If truthy, this plugin does nothing at all (recommended by default)
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`
6 changes: 3 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@ module.exports = class SpeedMeasurePlugin {
if (this.timeEventData.loaders)
outputObj.loaders = getLoadersOutput(this.timeEventData.loaders);

return this.options.outputFormat === "human"
? getHumanOutput(outputObj)
: JSON.stringify(outputObj, null, 2);
return this.options.outputFormat === "json"
? JSON.stringify(outputObj, null, 2)
: getHumanOutput(outputObj);
}

addTimeEvent(category, event, eventType, data = {}) {
Expand Down
Loading

0 comments on commit f8762ac

Please sign in to comment.