• Stars
    star
    290
  • Rank 142,981 (Top 3 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Webpack plugin for Lighthouse

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.

More Repositories

1

critical

Extract & Inline Critical-path CSS in HTML pages
JavaScript
10,033
star
2

backbone-fundamentals

📖 A creative-commons book on Backbone.js for beginners and advanced users alike
JavaScript
9,294
star
3

essential-js-design-patterns

Repo for my 'Learning JavaScript Design Patterns' book
HTML
4,254
star
4

es6-tools

An aggregation of tooling for using ES6 today
3,954
star
5

basket.js

A script and resource loader for caching & loading files with localStorage
JavaScript
3,362
star
6

es6-equivalents-in-es5

WIP - ES6 Equivalents In ES5
2,531
star
7

puppeteer-webperf

Automating Web Performance testing with Puppeteer 🎪
JavaScript
1,791
star
8

a11y

Accessibility audit tooling for the web (beta)
JavaScript
1,710
star
9

tmi

TMI (Too Many Images) - discover your image weight on the web
JavaScript
1,640
star
10

timing.js

Navigation Timing API measurement helpers
JavaScript
1,498
star
11

critical-path-css-tools

Tools to prioritize above-the-fold (critical-path) CSS
1,141
star
12

getUserMedia.js

Shim for getUserMedia(). Uses native implementation for modern browsers and a Flash fallback for everyone else.
JavaScript
908
star
13

critical-path-css-demo

Above-the-fold CSS generation + inlining using Critical & Gulp
ApacheConf
532
star
14

backbone-boilerplates

Backbone.js stack boilerplates demonstrating integration with Express, Ruby, PHP, Grails and more.
JavaScript
488
star
15

chatty

ChattyUI - your private AI chat for running LLMs in the browser
TypeScript
449
star
16

learning-jsdp

Learning JavaScript Design Patterns: 2nd Edition - The Examples
HTML
253
star
17

sublime-fixmyjs

SublimeText package for FixMyJS
Python
250
star
18

predictive-fetching

Improve performance by predictively fetching pages a user is likely to need
238
star
19

storage-on-the-web

🗃 Comparing storage options for the open web in 2016
225
star
20

visibly.js

A cross-browser Page Visibility API shim
JavaScript
221
star
21

sublime-build-systems

Sublime Text build systems
202
star
22

yeoman-examples

A repo of up to date examples using Yeoman
JavaScript
202
star
23

oust

Extract URLs to stylesheets, scripts, links, images or HTML imports from HTML
JavaScript
178
star
24

cssprettifier-bookmarklet

A bookmarklet for prettifying your CSS
JavaScript
174
star
25

polymer-boilerplate

A Polymer.js template for building fast, robust web apps using Web Components
JavaScript
166
star
26

pubsubz

Another Pub/Sub implementation
JavaScript
164
star
27

backbone-mobile-search

A Backbone.js + jQuery Mobile sample app using AMD for separation of modules, Require.js for dependency management + template externalisation and Underscore for templating
JavaScript
154
star
28

prism-js

A Polymer element for syntax highlighting with Prism.js
HTML
149
star
29

starter

A simple, git-clone friendly starting point for personal projects.
JavaScript
145
star
30

memoize.js

A faster JavaScript memoizer
JavaScript
143
star
31

largescale-demo

Scalable JS architecture demo for #jqcon
JavaScript
138
star
32

psi-gulp-sample

Sample Gulp project using PSI
JavaScript
126
star
33

preact-hn

🗞 Preact Hacker News
JavaScript
121
star
34

network-emulation-conditions

Network emulation / throttling conditions (2G, 3G, 4G, Wifi etc) ☎️
JavaScript
108
star
35

bubblesort

Bubble Sort implementation with O(n^2) complexity.
JavaScript
106
star
36

polymer-filters

Polymer filters for formatting values of expressions.
JavaScript
105
star
37

angular1-dribbble-pwa

Angular 1 Dribbble Progressive Web App demo
JavaScript
102
star
38

ember-progressive-webapp

Ember.js Zuperkulblog PWA (built with FastBoot and ember-cli)
JavaScript
97
star
39

memory-mysteries

V8 memory mysteries (sample app)
CSS
84
star
40

smaller-pictures-app

Smaller Pics Progressive Web App
JavaScript
82
star
41

x-instagram

[Deprecated] A Polymer element for querying the Instagram API (Note: not yet updated to Polymer 0.5.x)
JavaScript
76
star
42

x-imager

Responsive images using Imager.js and Polymer
74
star
43

backbonejs-gallery

A Backbone, Underscore and jQuery Templates based image gallery (early early beta)
JavaScript
72
star
44

todomvc-angular-4

Angular 4.x TodoMVC implementation
TypeScript
66
star
45

socketchat

SocketChat - a beginners chat app using SocketStream
CSS
63
star
46

github-watchers-button

An Embeddable GitHub 'Watchers' Button For External Pages
JavaScript
63
star
47

gulp-uncss-task

[Deprecated] Use gulp-uncss instead please.
JavaScript
63
star
48

yt-jukebox

A YouTube Jukebox element built with Polymer & Yeoman
JavaScript
61
star
49

critical-path-angular-demo

Above-the-fold CSS generation + inlining using Critical, Gulp & Angular
JavaScript
60
star
50

native-media-resizing

Draft proposal for browser-level media resizing
59
star
51

catclock

Polymer + Material Timer/Countdown/Countdown app (alpha)
JavaScript
56
star
52

recursive-binarysearch

Recursive Binary Search with O(log N) complexity
JavaScript
56
star
53

selectionsort

Selection sort with O(n^2) time complexity
JavaScript
56
star
54

polymer-grunt-example

Polymer + Grunt
JavaScript
56
star
55

microtemplatez

Another compact micro-templating solution
JavaScript
55
star
56

page-er

A Polymer element for paginating model data
CSS
53
star
57

google-slides

⚡ An offline-enabled Polymer slide-deck
HTML
53
star
58

flickly-wireframe

The jQuery mobile wireframe for Flickly
52
star
59

grunt-uncss-sass-example

An example of using grunt-uncss on a Sass project
JavaScript
52
star
60

sparkle-trail

<sparkle-trail> Polymer element - useful as a pre-loader
CSS
51
star
61

cssdiet

(WIP) - A DevTools extension for multi-page unused CSS auditing
JavaScript
46
star
62

github-client

Angular GitHub client for Firefox OS
JavaScript
44
star
63

a11y-webapp

A11y WebApp built with Polymer (WIP)
JavaScript
44
star
64

backbone-koans-qunit

Backbone Koans for QUnit
JavaScript
44
star
65

video-js

A Polymer element for Video.js
CSS
42
star
66

generator-webapp-uncss

Yeoman generator with grunt-uncss
JavaScript
42
star
67

lottie-animation-demo

Network-aware adaptive loading with Lottie Web
JavaScript
42
star
68

spine.bitly

(Demo app) A Spine.js Bit.ly client for shortening URLs and archiving references to these links offline.
JavaScript
39
star
69

backbone-aura

Backbone Aura
38
star
70

es2015-todomvc-chrome

ES2015 TodoMVC app that works without a transpiler
JavaScript
38
star
71

critical-css-weather-app

Critical-path CSS optimized weather app
JavaScript
37
star
72

polymer-blog

A tutorial app for generator-polymer
JavaScript
33
star
73

generator-boilerplate

A simple Yeoman generator using Git submodules to clone over a boilerplate hosted elsewhere on GitHub
JavaScript
31
star
74

npm-and-polymer-demo

Demo of Polymer + Paper elements working off npm3
HTML
30
star
75

jquery-roundrr

A jQuery plugin for plotting interactive content galleries in a circle form
JavaScript
30
star
76

polymer-localforage

A Polymer element for Mozilla's localForage (async storage via IndexedDB or WebSQL)
HTML
30
star
77

devtools-timeline-model-browser

Browser-friendly helper for parsing DevTools Timeline traces into structured profiling data models
JavaScript
29
star
78

mustache-for-chromeapps

A special build of mustache that works in Chrome Apps under CSP
JavaScript
28
star
79

addyosmani

GitHub README
27
star
80

active-route

Active view routing for Polymer extending <template>
CSS
25
star
81

tmdb-viewer-load-more

Accessibility-friendly version of TMDB Viewer (load-more)
JavaScript
25
star
82

webapp-scaffold

Polymer webapp scaffold element
CSS
25
star
83

typeahead-country

A Polymer element for autocompleting country names
24
star
84

react-interop

React + Polymer + X-Tag interop
JavaScript
24
star
85

vue-cli-todomvc

TodoMVC built using the Vue.js 2.0 CLI 🍰
JavaScript
22
star
86

polymer-browserify-vulcanize

Polymer + Browserify + Vulcanize
JavaScript
22
star
87

es6-starter

A minimal starting point for using ES6 today.
JavaScript
21
star
88

faster-video

A Polymer element for <video> with playback speed controls
JavaScript
21
star
89

js-shapelib

A minimalist JavaScript library for drawing objects around a Circle or Ellipse
JavaScript
19
star
90

element-query

Element queries with Polymer (experimental fork)
CSS
19
star
91

clientside-sample-buildfile

A Client-side ANT Build File Example
19
star
92

parsely

A small utility for parsing URLs of all types.
JavaScript
18
star
93

video-player

A themeable Polymer video element
JavaScript
16
star
94

page-router

Declarative URL routing for Polymer elements.
CSS
16
star
95

polymer-eventemitter

A Polymer event emitter element with support for wildcards, many and once.
JavaScript
15
star
96

lighthouse-reports

Quick module for getting Lighthouse reports in JSON form
JavaScript
15
star
97

generator-es6

An ES6.now project generator for Yeoman.
JavaScript
14
star
98

aura

A scalable, event-driven JavaScript architecture for developing widget-based applications. Works with Backbone.js and other frameworks.
14
star
99

jquery-googleviewer-plugin

A compact Google Viewer plugin
14
star
100

medium-backups

HTML
13
star