From 050c1f82cac14b720e0a31a02bb1bf10d6708373 Mon Sep 17 00:00:00 2001 From: Romain Racamier Date: Tue, 25 Jun 2019 11:05:16 +0200 Subject: [PATCH] delay style loading (#29) * inline assets --- .vscode/settings.json | 1 + package.json | 20 +++++++++++++------- src/index.html | 5 +++-- src/register-sw.js | 2 +- src/styles/_base.css | 4 ++++ static/_headers | 2 +- tests/check.js | 6 +++--- tests/puppeteer.js | 2 +- 8 files changed, 27 insertions(+), 15 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 4204f95..c433fa5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,7 @@ { "cSpell.words": [ "GTmetrix", + "nosniff", "purgecss", "sourcerer" ] diff --git a/package.json b/package.json index 94264e0..efb8b5b 100644 --- a/package.json +++ b/package.json @@ -2,17 +2,21 @@ "author": "Romain Racamier-Lafon ", "bugs": "https://github.com/Shuunen/folio/issues", "config": { + "lh-port": 8088, "port": 8080 }, "dependencies": { "cross-var": "1.1.0", "google-lighthouse-puppeteer": "0.5.2", - "http-server": "0.11.1", "npm-run-all": "4.1.5", "parcel-bundler": "1.12.3", + "parcel-plugin-inliner": "1.0.10", "parcel-plugin-purgecss": "2.1.2", "parcel-plugin-static-files-copy": "2.1.2", - "parcel-plugin-sw-precache": "1.1.1" + "parcel-plugin-sw-precache": "1.1.1", + "repo-check": "1.1.4", + "rimraf": "2.6.3", + "serve": "11.0.2" }, "description": "My personal portfolio", "devDependencies": { @@ -22,7 +26,6 @@ "src/", "static/" ], - "private": true, "homepage": "https://github.com/Shuunen/folio#readme", "keywords": [ "Romain Racamier-Lafon", @@ -33,20 +36,23 @@ ], "license": "GPL-3.0", "name": "folio", + "private": true, "repository": { "type": "git", "url": "git+https://github.com/Shuunen/folio.git" }, "scripts": { "build": "parcel build src/index.html --public-url . --no-source-maps", - "check": "npx repo-check", + "check": "repo-check", "dev": "cross-var parcel src/index.html --port $npm_package_config_port", "lint": "standard \"src/**/*.js\" \"tests/**/*.js\" --fix", - "prebuild": "npx rimraf dist/*", + "postbuild": "rimraf dist/{*.css,main.*.js}", + "prebuild": "rimraf dist/*", "prestart": "npm run build", - "serve": "cross-var http-server dist -p $npm_package_config_port", + "serve": "cross-var serve dist --listen $npm_package_config_port --single", + "serve:lh": "cross-var serve dist --listen $npm_package_config_lh_port --single", "start": "npm run serve", - "test": "npm-run-all check lint build --parallel serve test:lh --race", + "test": "npm-run-all check lint build --parallel serve:lh test:lh --race", "test:lh": "run-s test:lh:generate-report test:lh:check-metrics", "test:lh:check-metrics": "node tests/check.js", "test:lh:generate-report": "lighthouse-puppeteer --file ../../tests/puppeteer.js --output_directory tests/reports" diff --git a/src/index.html b/src/index.html index e995b32..8487bca 100644 --- a/src/index.html +++ b/src/index.html @@ -30,7 +30,8 @@

Hey I'm Romain Racamier-Lafon

VueJS, performance and - best practices. + best practices.

You can check my @@ -39,7 +40,7 @@

Hey I'm Romain Racamier-Lafon

if you dare.

- + diff --git a/src/register-sw.js b/src/register-sw.js index 2a36f70..eaae491 100644 --- a/src/register-sw.js +++ b/src/register-sw.js @@ -1,5 +1,5 @@ // Activate the service worker -if ('serviceWorker' in navigator && document.location.hostname !== 'localhost') { +if ('serviceWorker' in navigator && document.location.port !== '8080') { window.addEventListener('load', function () { // this way Parcel won't look for service-worker.js file const swName = 'service-worker.js' diff --git a/src/styles/_base.css b/src/styles/_base.css index 07a4800..0ec213a 100644 --- a/src/styles/_base.css +++ b/src/styles/_base.css @@ -34,6 +34,10 @@ a { text-decoration: none; } +p { + line-height: 2.5rem; +} + strong { color: var(--color-primary); } diff --git a/static/_headers b/static/_headers index bb95251..879381b 100644 --- a/static/_headers +++ b/static/_headers @@ -1,6 +1,6 @@ /* Cache-Control: public, max-age=31536000 - Content-Security-Policy: script-src 'self' 'strict-dynamic' 'nonce-shuu6162n1' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'self'; + Content-Security-Policy: script-src 'self' 'strict-dynamic' 'nonce-shu6162n1' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'self'; X-Content-Type-Options: nosniff X-Frame-Options: DENY X-XSS-Protection: 1; mode=block diff --git a/tests/check.js b/tests/check.js index d4db49c..6ad0ebe 100644 --- a/tests/check.js +++ b/tests/check.js @@ -1,8 +1,8 @@ const assert = require('assert') const data = require('./reports/summary.json') const score = parseFloat(data[0].score) * 100 -const lastScore = 95 +const minScore = 90 -assert(score >= lastScore, `Lighthouse current score is ${score} and should be superior or equal to last one : ${lastScore}`) +assert(score >= minScore, `Lighthouse current score is ${score} and should be superior or equal to the minimal one : ${minScore}`) -console.log(`\n\nGood ! Lighthouse current score (${score}) is not worse than last one (${lastScore}) \\o/\n`) +console.log(`\n\nGood ! Lighthouse current score (${score}) is great \\o/\n`) diff --git a/tests/puppeteer.js b/tests/puppeteer.js index d5113a9..b6c5f01 100644 --- a/tests/puppeteer.js +++ b/tests/puppeteer.js @@ -1,7 +1,7 @@ class Puppeteer { getUrls () { return [ - 'http://127.0.0.1:8080' + 'http://localhost:8088' ] }