diff --git a/README.md b/README.md index 720fc97..5c2ea82 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,36 @@ -

Speed Measure Plugin

+
+ +

+ Speed Measure Plugin +
(for webpack)
+

+

+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() @@ -28,10 +43,7 @@ to ```javascript const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); -{ - entry: {/*...*/}, - output: {/*...*/}, - module: {/*...*/}, +const webpackConfig = { plugins: SpeedMeasurePlugin.wrapPlugins({ MyPlugin: new MyPlugin(), MyOtherPlugin: new MyOtherPlugin() @@ -39,73 +51,66 @@ const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); } ``` -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`
+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`
+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`
+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` diff --git a/index.js b/index.js index 9998346..dcd49bd 100644 --- a/index.js +++ b/index.js @@ -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 = {}) { diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..7a850a2 --- /dev/null +++ b/logo.svg @@ -0,0 +1,217 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index 0b4dd8c..b3d83de 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "speed-measure-webpack-plugin", - "version": "0.1.1", - "description": "A Webpack plugin, to help measure the speed of your other loaders and plugins", + "version": "0.2.0", + "description": "Measure + analyse the speed of your webpack loaders and plugins", "main": "index.js", "repository": { "type": "git", diff --git a/preview.png b/preview.png index 01cd6cf..b7c1877 100644 Binary files a/preview.png and b/preview.png differ