Webpack Lighthouse Plugin
This plugin allows you to run Lighthouse from a Webpack build.
Installation
npm install --save-dev webpack-lighthouse-plugin
Setup
In webpack.config.js
:
const WebpackLighthousePlugin = require('webpack-lighthouse-plugin');
module.exports = {
...
plugins: [
new WebpackLighthousePlugin({
url: 'http://localhost:9001'
})
],
...
}
Example
Insert into your webpack.config.js:
const WebpackLighthousePlugin = require('webpack-lighthouse-plugin');
module.exports = {
entry: 'sample.js',
output: {
filename: 'test.js'
},
plugins: [
new WebpackLighthousePlugin({
url: 'https://airhorner.com'
})
],
};
API
url
- the URL to run Lighthouse audits againstperf
- only report Lighthouse performance audits (instead of the full Progressive Web App audits)disableDeviceEmulation
- disables device emulation (false
by default)disableCPUThrottling
- disables cpu throttling (true
by default)disableNetworkThrottling
- disables network throttling (false
by default)saveAssets
- save the trace contents & screenshots to disksaveArtifacts
- save all gathered artifacts to disk
Examples
Performance metrics only
Just get the time to first meaningful paint, time-to-interactive and perceptual speed-index:
plugins: [
new WebpackLighthousePlugin({
url: 'https://airhorner.com',
perf: true
})
],
Test with CPU, network throttling and device emulation
plugins: [
new WebpackLighthousePlugin({
url: 'https://airhorner.com',
disableCPUThrottling: false
})
],
Save build assets (screenshots, trace and report):
plugins: [
new WebpackLighthousePlugin({
url: 'https://airhorner.com',
saveAssets: true
})
],
If you require even more data, you can also pass saveArtifacts: true
.
webpack-lighthouse-plugin
with real mobile devices
Running Similar to the Lighthouse module, this plugin can also be used with real phones. It works over remote debugging using the Android command line tools.
Before running the plugin as part of your Webpack build, run the following commands:
$ adb kill-server
$ adb devices -l
$ adb forward tcp:9222 localabstract:chrome_devtools_remote
You can then run webpack
against your build and instead of firing up a Chrome instance on desktop, it'll do this with
your mobile device Chrome instead. You will want to disable a few flags to improve the accuracy of your metrics:
plugins: [
new WebpackLighthousePlugin({
url: 'https://localhost:9000', // Port you are locally serving on
disableDeviceEmulation: true,
disableCPUThrottling: true,
disableNetworkThrottling: true // Only if you're going to use real 3G
})
],
Webpack Dev Server
Note: Webpack Dev Server targets development builds rather than production. Although you can run Lighthouse against a dev build, it's best run against builds closer to prod.
If you're trying to use webpack-dev-server with
this plugin, first run it against your local build using the webpack-dev-server
CLI:
$ webpack-dev-server build/
http://localhost:8080/webpack-dev-server/
Then make sure to reference the webpack-dev-server
URL in your WebpackLighthousePlugin
config:
plugins: [
new WebpackLighthousePlugin({
url: 'http://localhost:8080/webpack-dev-server/'
})
],
Developing
If opening a pull request, create an issue describing a fix or feature. Have your pull request point to the issue by writing your commits with the issue number in the message.
Make sure you lint your code by running npm run lint
and you can build the library by running
npm run build
.
License
Released under an Apache-2.0 license.