1 | <div align="center">
|
2 | <img width="120" height="120" src="https://rawgit.com/stephencookdev/speed-measure-webpack-plugin/master/logo.svg" />
|
3 | <h1>
|
4 | Speed Measure Plugin
|
5 | <div><sup><em>(for webpack)</em></sup></div>
|
6 | </h1>
|
7 |
|
8 |
|
9 | <a href="https://travis-ci.org/stephencookdev/speed-measure-webpack-plugin"><img src="https://travis-ci.org/stephencookdev/speed-measure-webpack-plugin.svg?branch=master" /></a> <a href="https://npmjs.com/package/speed-measure-webpack-plugin"><img src="https://img.shields.io/npm/dw/speed-measure-webpack-plugin.svg" /></a> <a href="https://npmjs.com/package/speed-measure-webpack-plugin"><img src="https://img.shields.io/node/v/speed-measure-webpack-plugin.svg" /></a> <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg" /></a> <a href="#contributors"><img src="https://img.shields.io/badge/all_contributors-8-orange.svg" /></a>
|
10 |
|
11 |
|
12 | </div>
|
13 | <br>
|
14 |
|
15 | The first step to optimising your webpack build speed, is to know where to focus your attention.
|
16 |
|
17 | This plugin measures your webpack build speed, giving an output like this:
|
18 |
|
19 | ![Preview of Speed Measure Plugin's output](preview.png)
|
20 |
|
21 | ## Install
|
22 |
|
23 | ```bash
|
24 | npm install --save-dev speed-measure-webpack-plugin
|
25 | ```
|
26 |
|
27 | or
|
28 |
|
29 | ```bash
|
30 | yarn add -D speed-measure-webpack-plugin
|
31 | ```
|
32 |
|
33 | ## Requirements
|
34 |
|
35 | SMP requires at least **Node v6**. But otherwise, accepts **all webpack** versions (1, 2, 3, and 4).
|
36 |
|
37 | ## Usage
|
38 |
|
39 | Change your webpack config from
|
40 |
|
41 | ```javascript
|
42 | const webpackConfig = {
|
43 | plugins: [new MyPlugin(), new MyOtherPlugin()],
|
44 | };
|
45 | ```
|
46 |
|
47 | to
|
48 |
|
49 | ```javascript
|
50 | const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
|
51 |
|
52 | const smp = new SpeedMeasurePlugin();
|
53 |
|
54 | const webpackConfig = smp.wrap({
|
55 | plugins: [new MyPlugin(), new MyOtherPlugin()],
|
56 | });
|
57 | ```
|
58 |
|
59 | and you're done! SMP will now be printing timing output to the console by default.
|
60 |
|
61 | Check out the [examples folder](/examples) for some more examples.
|
62 |
|
63 | ## Options
|
64 |
|
65 | Pass these into the constructor, as an object:
|
66 |
|
67 | ```javascript
|
68 | const smp = new SpeedMeasurePlugin(options);
|
69 | ```
|
70 |
|
71 | ### `options.disable`
|
72 |
|
73 | Type: `Boolean`<br>
|
74 | Default: `false`
|
75 |
|
76 | If truthy, this plugin does nothing at all.
|
77 |
|
78 | `{ disable: !process.env.MEASURE }` allows opt-in measurements with `MEASURE=true npm run build`.
|
79 |
|
80 | ### `options.outputFormat`
|
81 |
|
82 | Type: `String|Function`<br>
|
83 | Default: `"human"`
|
84 |
|
85 | Determines in what format this plugin prints its measurements
|
86 |
|
87 | - `"json"` - produces a JSON blob
|
88 | - `"human"` - produces a human readable output
|
89 | - `"humanVerbose"` - produces a more verbose version of the human readable output
|
90 | - If a function, it will call the function with the JSON blob, and output the response
|
91 |
|
92 | ### `options.outputTarget`
|
93 |
|
94 | Type: `String|Function`<br>
|
95 | Default: `console.log`
|
96 |
|
97 | - If a string, it specifies the path to a file to output to.
|
98 | - If a function, it will call the function with the output as the first parameter
|
99 |
|
100 | ### `options.pluginNames`
|
101 |
|
102 | Type: `Object`<br>
|
103 | Default: `{}`
|
104 |
|
105 | By default, SMP derives plugin names through `plugin.constructor.name`. For some
|
106 | plugins this doesn't work (or you may want to override this default). This option
|
107 | takes an object of `pluginName: PluginConstructor`, e.g.
|
108 |
|
109 | ```javascript
|
110 | const uglify = new UglifyJSPlugin();
|
111 | const smp = new SpeedMeasurePlugin({
|
112 | pluginNames: {
|
113 | customUglifyName: uglify,
|
114 | },
|
115 | });
|
116 |
|
117 | const webpackConfig = smp.wrap({
|
118 | plugins: [uglify],
|
119 | });
|
120 | ```
|
121 |
|
122 | ### `options.loaderTopFiles`
|
123 |
|
124 | Type: `Number`<br>
|
125 | Default: `0`
|
126 |
|
127 | You can configure SMP to include the files that take the most time per loader, when using `outputFormat: 'humanVerbose'`. E.g., to show the top 10 files per loader:
|
128 |
|
129 | ```javascript
|
130 | const smp = new SpeedMeasurePlugin({
|
131 | outputFormat: "humanVerbose",
|
132 | loaderTopFiles: 10,
|
133 | });
|
134 | ```
|
135 |
|
136 | ### `options.granularLoaderData` _(experimental)_
|
137 |
|
138 | Type: `Boolean`<br>
|
139 | Default: `false`
|
140 |
|
141 | By default, SMP measures loaders in groups. If truthy, this plugin will give per-loader timing information.
|
142 |
|
143 | This flag is _experimental_. Some loaders will have inaccurate results:
|
144 |
|
145 | - loaders using separate processes (e.g. `thread-loader`)
|
146 | - loaders emitting file output (e.g. `file-loader`)
|
147 |
|
148 | We will find solutions to these issues before removing the _(experimental)_ flag on this option.
|
149 |
|
150 | ## FAQ
|
151 |
|
152 | ### What does general output time mean?
|
153 |
|
154 | This tends to be down to webpack reading in from the file-system, but in general it's anything outside of what SMP can actually measure.
|
155 |
|
156 | ### What does modules without loaders mean?
|
157 |
|
158 | It means vanilla JS files, which webpack can handle out of the box.
|
159 |
|
160 | ## Contributing
|
161 |
|
162 | Contributors are welcome! π
|
163 |
|
164 | Please check out the [CONTRIBUTING.md](./CONTRIBUTING.md).
|
165 |
|
166 | ## Migrating
|
167 |
|
168 | SMP follows [semver](https://semver.org/). If upgrading a major version, you can consult [the migration guide](./migration.md).
|
169 |
|
170 | ## License
|
171 |
|
172 | [MIT](/LICENSE)
|
173 |
|
174 | ## Contributors β¨
|
175 |
|
176 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
177 |
|
178 |
|
179 |
|
180 |
|
181 | <table>
|
182 | <tr>
|
183 | <td align="center"><a href="https://stephencookdev.co.uk/"><img src="https://avatars.githubusercontent.com/u/8496655?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Stephen Cook</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=stephencookdev" title="Code">π»</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=stephencookdev" title="Documentation">π</a> <a href="#blog-stephencookdev" title="Blogposts">π</a> <a href="#design-stephencookdev" title="Design">π¨</a> <a href="#question-stephencookdev" title="Answering Questions">π¬</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/pulls?q=is%3Apr+reviewed-by%3Astephencookdev" title="Reviewed Pull Requests">π</a></td>
|
184 | <td align="center"><a href="https://scarletsky.github.io/"><img src="https://avatars.githubusercontent.com/u/2386165?v=4?s=100" width="100px;" alt=""/><br /><sub><b>scarletsky</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=scarletsky" title="Code">π»</a></td>
|
185 | <td align="center"><a href="https://github.com/wayou"><img src="https://avatars.githubusercontent.com/u/3783096?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ηγγ</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=wayou" title="Code">π»</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/issues?q=author%3Awayou" title="Bug reports">π</a></td>
|
186 | <td align="center"><a href="https://github.com/ThomasHarper"><img src="https://avatars.githubusercontent.com/u/3199791?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Thomas Bentkowski</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=ThomasHarper" title="Documentation">π</a></td>
|
187 | <td align="center"><a href="https://github.com/alan-agius4"><img src="https://avatars.githubusercontent.com/u/17563226?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alan Agius</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=alan-agius4" title="Code">π»</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/issues?q=author%3Aalan-agius4" title="Bug reports">π</a></td>
|
188 | <td align="center"><a href="https://daix.me/"><img src="https://avatars.githubusercontent.com/u/1396511?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ximing</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=NdYAG" title="Code">π»</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/issues?q=author%3ANdYAG" title="Bug reports">π</a></td>
|
189 | <td align="center"><a href="https://twitter.com/lihautan"><img src="https://avatars.githubusercontent.com/u/2338632?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tan Li Hau</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=tanhauhau" title="Code">π»</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/issues?q=author%3Atanhauhau" title="Bug reports">π</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=tanhauhau" title="Tests">β οΈ</a></td>
|
190 | </tr>
|
191 | <tr>
|
192 | <td align="center"><a href="https://github.com/ZauberNerd"><img src="https://avatars.githubusercontent.com/u/249542?v=4?s=100" width="100px;" alt=""/><br /><sub><b>BjΓΆrn Brauer</b></sub></a><br /><a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/commits?author=ZauberNerd" title="Code">π»</a> <a href="https://github.com/stephencookdev/speed-measure-webpack-plugin/issues?q=author%3AZauberNerd" title="Bug reports">π</a></td>
|
193 | </tr>
|
194 | </table>
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! |
\ | No newline at end of file |