https://github.com/rpivo/lighthouse-build-compare-poc

comparison tool that generates performance reports based on an arbitrary number of lighthouse audits against different builds
https://github.com/rpivo/lighthouse-build-compare-poc

Last synced: 8 days ago
JSON representation

comparison tool that generates performance reports based on an arbitrary number of lighthouse audits against different builds

• Host: GitHub
• URL: https://github.com/rpivo/lighthouse-build-compare-poc
• Owner: rpivo
• Created: 2020-05-16T02:28:59.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T06:04:05.000Z (almost 2 years ago)
• Last Synced: 2024-05-31T15:28:46.679Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 487 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Packages Used

#### compression-webpack-plugin

For production builds, **compression-webpack-plugin** compresses all files to both brotli and gzip formats. These files can then be selectively served depending on if the browser can work with brotli compression or not.

#### copy-webpack-plugin

Copies external, servable React files from `node_modules` into the `/dist` folder during the build.

#### express-static-gzip

In order to locally test and serve compressed brotli / gzip files, spin up a local express server that uses `express-static-gzip` to serve these compressed files.

#### html-webpack-plugin

Generates an `index.html` file from a template during the build that can change depending on environment variables.

#### webpack-bundle-analyzer

Graphically displays chunk and bundle sizes, providing a deeper understanding of the build output.



### Optimizations

#### brotli & gzip Compression

Webpack builds both brotli and gzip files, outputting these files into `/br` and `/gz` folders inside the `/dist` output folder. When the local express server is spun up, each of these folder paths can be tested for performance (the brotli folder will generally be lighter). 

#### Dynamic Imports

Inside **App.tsx** is an example of a dynamic import. When serving the build, clicking on the rendered button results in lazy-loaded imports. These dynamic imports can be seen coming in on the network tab when the button is clicked rather than on page load.

#### Webpack `maxSize`

Webpack is set to output bundles and chunks with a `maxSize` of 244,000 bytes. Webpack identifies files larger than 244kb as `big`.