webpack-lighthouse-plugin

    1.0.9 • Public • Published

    npm version npm

    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 against
    • perf - 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 disk
    • saveArtifacts - 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.

    Running webpack-lighthouse-plugin with real mobile devices

    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.

    Install

    npm i webpack-lighthouse-plugin

    DownloadsWeekly Downloads

    133

    Version

    1.0.9

    License

    Apache-2.0

    Unpacked Size

    28.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • addyosmani
    • ev1stensberg