|
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> |
2 | 8 | <br> |
3 | 9 |
|
| 10 | +The first step to optimising your webpack build speed, is to know where to focus your attention. |
| 11 | + |
4 | 12 | This plugin measures your webpack build speed, giving an output like this: |
5 | 13 |
|
6 | 14 |  |
7 | 15 |
|
8 | | -# Getting Started |
| 16 | +## Install |
| 17 | + |
| 18 | +```bash |
| 19 | +npm install --save speed-measure-webpack-plugin |
| 20 | +``` |
| 21 | + |
| 22 | +or |
9 | 23 |
|
10 | | -`npm install --save speed-measure-webpack-plugin` |
| 24 | +```bash |
| 25 | +yarn add speed-measure-webpack-plugin |
| 26 | +``` |
| 27 | + |
| 28 | +## Usage |
11 | 29 |
|
12 | 30 | Change your webpack config from |
13 | 31 |
|
14 | 32 | ```javascript |
15 | | -{ |
16 | | - entry: {/*...*/}, |
17 | | - output: {/*...*/}, |
18 | | - module: {/*...*/}, |
| 33 | +const webpackConfig = { |
19 | 34 | plugins: [ |
20 | 35 | new MyPlugin(), |
21 | 36 | new MyOtherPlugin() |
|
28 | 43 | ```javascript |
29 | 44 | const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); |
30 | 45 |
|
31 | | -{ |
32 | | - entry: {/*...*/}, |
33 | | - output: {/*...*/}, |
34 | | - module: {/*...*/}, |
| 46 | +const webpackConfig = { |
35 | 47 | plugins: SpeedMeasurePlugin.wrapPlugins({ |
36 | 48 | MyPlugin: new MyPlugin(), |
37 | 49 | MyOtherPlugin: new MyOtherPlugin() |
38 | 50 | }) |
39 | 51 | } |
40 | 52 | ``` |
41 | 53 |
|
42 | | -Or you can also specify config: |
| 54 | +If you're using `webpack-merge`, then you can do: |
43 | 55 |
|
44 | 56 | ```javascript |
45 | | -const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); |
| 57 | +const smp = new SpeedMeasurePlugin(); |
46 | 58 |
|
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({ |
53 | 68 | MyOtherPlugin: new MyOtherPlugin() |
54 | | - }, { |
55 | | - outputFormat: "human", |
56 | | - outputTarget: "myFile.txt" |
57 | 69 | }) |
| 70 | + // ^ note no `.concat(smp)` |
58 | 71 | } |
| 72 | + |
| 73 | +const finalWebpackConfig = webpackMerge([ |
| 74 | + baseConfig, |
| 75 | + envSpecificConfig |
| 76 | +]); |
| 77 | + |
59 | 78 | ``` |
60 | 79 |
|
61 | | -If you're using `webpack-merge`, then you can do: |
| 80 | +## Options |
| 81 | + |
| 82 | +Options are passed in to the constructor |
62 | 83 |
|
63 | 84 | ```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 | +``` |
84 | 87 |
|
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); |
91 | 92 | ``` |
92 | 93 |
|
93 | | -## `outputFormat` ## |
| 94 | +### `options.outputFormat` |
| 95 | + |
| 96 | +Type: `String`<br> |
| 97 | +Default: `"human"` |
94 | 98 |
|
95 | | -(default `"json"`) |
| 99 | +Determines in what format this plugin prints its measurements |
96 | 100 |
|
97 | 101 | * `"json"` - produces a JSON blob |
98 | 102 | * `"human"` - produces a human readable output |
99 | 103 |
|
100 | | -## `outputTarget` ## |
| 104 | +### `options.outputTarget` |
101 | 105 |
|
102 | | -(default `null`) |
| 106 | +Type: `String`<br> |
| 107 | +Default: `undefined` |
103 | 108 |
|
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` |
106 | 110 |
|
107 | | -## `disable` ## |
| 111 | +### `options.disable` |
108 | 112 |
|
109 | | -(default `null`) |
| 113 | +Type: `Boolean`<br> |
| 114 | +Default: `false` |
110 | 115 |
|
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` |
0 commit comments