From be822330dd5180c97137539cd7ed3148a30fb139 Mon Sep 17 00:00:00 2001 From: Grgur Grisogono Date: Thu, 12 Sep 2019 18:12:17 +0200 Subject: [PATCH 1/2] Introduce performance regression CI check MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Using [Gimbal](https://github.com/ModusCreateOrg/gimbal) and GitHub Actions to ensure Performance Budgeting on VueJS.org homepage. This CI action will * [x] ensure lighthouse tests don’t fall below thresholds * [x] ensure a11y rules are observed * [x] ensure heap memory doesn’t go over the threshold * [x] automatically create a PR comment with items that are failing The thresholds are loose to reflect the current state of the built site. Some of the tests are skipped as they are taken care of on the server side post-deployment. --- .gimbalrc.yml | 58 ++++++++++++++++++++++++++++++++++++++++ .github/workflows/ci.yml | 24 +++++++++++++++++ .gitignore | 1 + 3 files changed, 83 insertions(+) create mode 100644 .gimbalrc.yml create mode 100644 .github/workflows/ci.yml diff --git a/.gimbalrc.yml b/.gimbalrc.yml new file mode 100644 index 0000000000..5f324a50c1 --- /dev/null +++ b/.gimbalrc.yml @@ -0,0 +1,58 @@ +audits: + - axe + - size + - lighthouse + - heap-snapshot + +configs: + buildDir: public + comment: + onlyFailures: true + lighthouse: + threshold: + accessibility: 95 + best-practices: 92 + performance: 50 + pwa: 52 + seo: 100 + skipAudits: + - uses-http2 + - redirects-http + - uses-long-cache-ttl + - uses-text-compression + - errors-in-console + - render-blocking-resources + - uses-webp-images + - unminified-javascript + heap-snapshot: + threshold: + Documents: 32 + Frames: 15 + JSHeapTotalSize: 22574208 + JSHeapUsedSize: 13445280 + Nodes: 3000 + RecalcStyleCount: 22 + LayoutCount: 15 + size: + - path: public/index.html + maxSize: 10 KB + - path: public/service-worker.js + maxSize: 20 KB + - path: public + maxSize: 15 MB + +outputs: + cli: + onlyFailures: true + html: artifacts/gimbal.html + json: artifacts/gimbal.json + markdown: artifacts/gimbal.md + +plugins: + - plugin: '@modus/gimbal-plugin-axe' + thresholds: + heading-order: moderate + region: moderate + duplicate-id: minor + color-contrast: serious + landmark-one-main: moderate diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000000..891df35f56 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,24 @@ +name: CI + +on: [push] + +jobs: + Test: + runs-on: ubuntu-latest + steps: + - name: Check out the code + uses: actions/checkout@v1 + with: + fetch-depth: 1 + - name: Install node + uses: actions/setup-node@v1 + with: + node-version: 12.x + - name: Install npm dependencies + run: npm i + - name: Build + run: npm run build + - name: Performance Budgeting Regression Testing + uses: ModusCreateOrg/gimbal/action@master + env: + GITHUB_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.gitignore b/.gitignore index 8b7ec505e3..c0314071ef 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ public/ .deploy*/ src/_drafts package-lock.json +artifacts From bf5afd6577951c9381d65677402a1d330fc09cfd Mon Sep 17 00:00:00 2001 From: Grgur Grisogono Date: Thu, 12 Sep 2019 18:21:38 +0200 Subject: [PATCH 2/2] Axe plugin --- package.json | 3 +++ yarn.lock | 25 +++++++++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/package.json b/package.json index 030bfdfb41..50b44c6644 100644 --- a/package.json +++ b/package.json @@ -28,5 +28,8 @@ "hexo-server": "^0.3.1", "hoek": "^6.1.2", "request": "^2.85.0" + }, + "devDependencies": { + "@modus/gimbal-plugin-axe": "^1.2.3" } } diff --git a/yarn.lock b/yarn.lock index 8a35916a17..2d5b254f81 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,14 @@ # yarn lockfile v1 +"@modus/gimbal-plugin-axe@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@modus/gimbal-plugin-axe/-/gimbal-plugin-axe-1.2.3.tgz#62ee0a4dcb137567426db83e1a39ceb8f53b3ed9" + integrity sha512-2VFDtBa0JTFM/qUF8AAXk4gwEDI1wj1lNAQF2AWOWoidxuZhKaEcI4eWzS/y836QczRql4Emu6gvOm79NepEeg== + dependencies: + axe-puppeteer "1.0.0" + deepmerge "4.0.0" + JSONStream@^1.0.7: version "1.3.5" resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0" @@ -211,6 +219,18 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ== +axe-core@^3.1.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.3.2.tgz#7baf3c55a5cf1621534a2c38735f5a1bf2f7e1a8" + integrity sha512-lRdxsRt7yNhqpcXQk1ao1BL73OZDzmFCWOG0mC4tGR/r14ohH2payjHwCMQjHGbBKm924eDlmG7utAGHiX/A6g== + +axe-puppeteer@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/axe-puppeteer/-/axe-puppeteer-1.0.0.tgz#cebbeec2c65a2e0cb7d5fd1e7aef26c5f71895a4" + integrity sha512-hTF3u4mtatgTN7fsLVyVgbRdNc15ngjDcTEuqhn9A7ugqLhLCryJWp9fzqZkNlrW8awPcxugyTwLPR7mRdPZmA== + dependencies: + axe-core "^3.1.2" + babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -783,6 +803,11 @@ deep-extend@^0.6.0: resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== +deepmerge@4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.0.0.tgz#3e3110ca29205f120d7cb064960a39c3d2087c09" + integrity sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww== + define-property@^0.2.5: version "0.2.5" resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"