/vividus-lighthouse-viewer-adaptation

Apache License 2.0Apache-2.0

Build guide

  1. Clone Lighthouse CI repository

  2. Open lighthouse-ci/scripts/build-app.js and disable JS minification by setting the minify to false

  3. Execute npx lerna run --scope @lhci/viewer build command to build viewer module

  4. Go to lighthouse-ci/packages/viewer/dist folder and copy all the content inside

  5. Go to vividus-lighthouse-viewer-adaptation repository and create a new branch using viewer-<lighthouse-ci commit hash used to build dist> pattern

  6. Past previously copied content to current folder and commit changes using Build: <lighthouse-ci commit hash used to build dist> message format

  7. Open chunks/entry-<rand>.js bundle and replace baseReport initialization in App component with the following code:

    const [baseReport, setBaseReport] = h2({
  lhr: __LIGHTHOUSE_JSON_BASE__
});

  8. Open chunks/entry-<rand>.js bundle and replace compareReport initialization in App component with the following code:

    const [compareReport, setCompareReport] = h2({
  lhr: __LIGHTHOUSE_JSON_COMPARE__
});

  9. Open index.html file and add the following script after <div id="preact-root"></div> element:

    <script type="application/javascript">
    window.__LIGHTHOUSE_JSON_BASE__ = ${baseline};
    window.__LIGHTHOUSE_JSON_COMPARE__ = ${checkpoint};
</script>

  10. Perform the following replacements in index.html file

    • ./chunks/ should be replaced with ../../webjars/vividus-lighthouse-viewer-adaptation/chunks/
    • assets/ should be replaced with ../../webjars/vividus-lighthouse-viewer-adaptation/assets/

  11. Perform the following replacements in chunks/entry-<rand>.js file

    • ./assets/ should be replaced with ../../webjars/vividus-lighthouse-viewer-adaptation/assets/
    • chunks/ should be replaced with ../../webjars/vividus-lighthouse-viewer-adaptation/chunks/

  12. Perform the following replacements in chunks/entry-<rand>.css file

    • ../assets/ should be replaced ../../vividus-lighthouse-viewer-adaptation/assets/
    • chunks/ should be replaced with ../../webjars/vividus-lighthouse-viewer-adaptation/chunks/

  13. Commit the changes using Customization message format

  14. Minify chunks/entry-<rand>.js using JS minification tool and replace chunks/entry-<rand>.js file content with the minified content

  15. Commit the changes using Minified message format

  16. Push the branch