From cd180a009fae96294a04b6993b9609e8441988c0 Mon Sep 17 00:00:00 2001 From: Tom Ross Date: Wed, 27 Oct 2021 15:27:36 +0100 Subject: [PATCH] Performance: Optimize static SVG assets with SVGO (#26285) --- package.json | 5 +- svgo.config.js | 18 + .../img/codemonitoring-illustration-dark.svg | 50 +- .../img/codemonitoring-illustration-light.svg | 51 +- ui/assets/img/codemonitoring-notify-dark.svg | 20 +- ui/assets/img/codemonitoring-notify-light.svg | 20 +- ui/assets/img/codemonitoring-search-dark.svg | 12 +- ui/assets/img/codemonitoring-search-light.svg | 12 +- ui/assets/img/customer-logos-dark.svg | 36 +- ui/assets/img/customer-logos-light.svg | 36 +- ui/assets/img/devtooltime-logo.svg | 62 +-- ui/assets/img/homepage-hero-dark.svg | 2 +- ui/assets/img/homepage-hero-light.svg | 2 +- ui/assets/img/logo-chrome.svg | 74 +-- ui/assets/img/logo-firefox.svg | 469 +----------------- ui/assets/img/sourcegraph-logo-dark.svg | 2 +- ui/assets/img/sourcegraph-logo-light.svg | 2 +- ui/assets/img/sourcegraph-mark.svg | 2 +- yarn.lock | 36 +- 19 files changed, 71 insertions(+), 840 deletions(-) create mode 100644 svgo.config.js diff --git a/package.json b/package.json index 5e60bba43fa..23d29e76b21 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ "docsite:serve": "./dev/docsite.sh -config doc/docsite.json serve -http=localhost:5080", "download-puppeteer-browser": "yarn --cwd client/shared download-puppeteer-browser", "build-browser-extension": "yarn --cwd client/browser run build", - "install:sg": "dev/sg/install.sh" + "install:sg": "dev/sg/install.sh", + "optimize-svg-assets": "svgo ui/assets/img --multipass --config=\"./svgo.config.js\"" }, "browserslist": [ "last 1 version", @@ -307,6 +308,7 @@ "string-width": "^4.2.0", "style-loader": "^3.1.0", "stylelint": "^13.8.0", + "svgo": "^2.7.0", "term-size": "^2.2.0", "terser-webpack-plugin": "^5.1.4", "thread-loader": "^3.0.4", @@ -340,6 +342,7 @@ "@sourcegraph/extension-api-classes": "^1.1.0", "@sourcegraph/react-loading-spinner": "0.0.7", "@sqs/jsonc-parser": "^1.0.3", + "@types/svgo": "^2.6.0", "@visx/annotation": "^1.7.2", "@visx/axis": "^1.7.0", "@visx/glyph": "^1.7.0", diff --git a/svgo.config.js b/svgo.config.js new file mode 100644 index 00000000000..70d717b9355 --- /dev/null +++ b/svgo.config.js @@ -0,0 +1,18 @@ +// @ts-check + +/** @type {import('svgo').OptimizeOptions} */ +const config = { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + // Do not remove viewBox, we need it to accurately scale SVGs: https://github.com/svg/svgo/issues/1128 + removeViewBox: false, + }, + }, + }, + ], +} + +module.exports = config diff --git a/ui/assets/img/codemonitoring-illustration-dark.svg b/ui/assets/img/codemonitoring-illustration-dark.svg index 43d4a18f72a..044ef24b44a 100644 --- a/ui/assets/img/codemonitoring-illustration-dark.svg +++ b/ui/assets/img/codemonitoring-illustration-dark.svg @@ -1,49 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/codemonitoring-illustration-light.svg b/ui/assets/img/codemonitoring-illustration-light.svg index c3a668d17a2..74fda8b69ee 100644 --- a/ui/assets/img/codemonitoring-illustration-light.svg +++ b/ui/assets/img/codemonitoring-illustration-light.svg @@ -1,50 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/codemonitoring-notify-dark.svg b/ui/assets/img/codemonitoring-notify-dark.svg index 227c884c861..1feed65e49f 100644 --- a/ui/assets/img/codemonitoring-notify-dark.svg +++ b/ui/assets/img/codemonitoring-notify-dark.svg @@ -1,19 +1 @@ - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/codemonitoring-notify-light.svg b/ui/assets/img/codemonitoring-notify-light.svg index ec4b45f7b38..2d6b7158d15 100644 --- a/ui/assets/img/codemonitoring-notify-light.svg +++ b/ui/assets/img/codemonitoring-notify-light.svg @@ -1,19 +1 @@ - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/codemonitoring-search-dark.svg b/ui/assets/img/codemonitoring-search-dark.svg index 31df12d7dbb..5b679710c2c 100644 --- a/ui/assets/img/codemonitoring-search-dark.svg +++ b/ui/assets/img/codemonitoring-search-dark.svg @@ -1,11 +1 @@ - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/codemonitoring-search-light.svg b/ui/assets/img/codemonitoring-search-light.svg index a2f7fb516db..4f76aa49434 100644 --- a/ui/assets/img/codemonitoring-search-light.svg +++ b/ui/assets/img/codemonitoring-search-light.svg @@ -1,11 +1 @@ - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/customer-logos-dark.svg b/ui/assets/img/customer-logos-dark.svg index 141d0785752..12e30d63206 100644 --- a/ui/assets/img/customer-logos-dark.svg +++ b/ui/assets/img/customer-logos-dark.svg @@ -1,35 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/customer-logos-light.svg b/ui/assets/img/customer-logos-light.svg index 466444a32a6..d26e2513258 100644 --- a/ui/assets/img/customer-logos-light.svg +++ b/ui/assets/img/customer-logos-light.svg @@ -1,35 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/devtooltime-logo.svg b/ui/assets/img/devtooltime-logo.svg index 4874b7a5505..999173979b3 100644 --- a/ui/assets/img/devtooltime-logo.svg +++ b/ui/assets/img/devtooltime-logo.svg @@ -1,61 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/homepage-hero-dark.svg b/ui/assets/img/homepage-hero-dark.svg index e09102e3db1..6b88af34176 100644 --- a/ui/assets/img/homepage-hero-dark.svg +++ b/ui/assets/img/homepage-hero-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/ui/assets/img/homepage-hero-light.svg b/ui/assets/img/homepage-hero-light.svg index 9cc1a574fcd..1474a1ec690 100644 --- a/ui/assets/img/homepage-hero-light.svg +++ b/ui/assets/img/homepage-hero-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/ui/assets/img/logo-chrome.svg b/ui/assets/img/logo-chrome.svg index 569e9065052..281b46855cd 100644 --- a/ui/assets/img/logo-chrome.svg +++ b/ui/assets/img/logo-chrome.svg @@ -1,73 +1 @@ - -Group -Created using Figma - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/logo-firefox.svg b/ui/assets/img/logo-firefox.svg index 348ccf9931f..aea70b7fc91 100644 --- a/ui/assets/img/logo-firefox.svg +++ b/ui/assets/img/logo-firefox.svg @@ -1,468 +1 @@ - -Group -Created using Figma - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/ui/assets/img/sourcegraph-logo-dark.svg b/ui/assets/img/sourcegraph-logo-dark.svg index 2129e807a9f..e44ad04a1ba 100644 --- a/ui/assets/img/sourcegraph-logo-dark.svg +++ b/ui/assets/img/sourcegraph-logo-dark.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/ui/assets/img/sourcegraph-logo-light.svg b/ui/assets/img/sourcegraph-logo-light.svg index a14d2cbef7f..fa931a6bc9a 100644 --- a/ui/assets/img/sourcegraph-logo-light.svg +++ b/ui/assets/img/sourcegraph-logo-light.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/ui/assets/img/sourcegraph-mark.svg b/ui/assets/img/sourcegraph-mark.svg index 5bd2c5d9239..a5f3cb0fac4 100644 --- a/ui/assets/img/sourcegraph-mark.svg +++ b/ui/assets/img/sourcegraph-mark.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7a9aee519c0..4008efb1fac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4637,6 +4637,11 @@ resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw== +"@trysound/sax@0.2.0": + version "0.2.0" + resolved "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" + integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== + "@ts-morph/common@~0.6.0": version "0.6.0" resolved "https://registry.npmjs.org/@ts-morph/common/-/common-0.6.0.tgz#cbd4ee57c5ef971511b9c5778e0bb8eb27de4783" @@ -5651,6 +5656,13 @@ resolved "https://registry.npmjs.org/@types/stripe-v3/-/stripe-v3-3.0.8.tgz#9c2816acf34dcf0948236fc81ce99442344ebfb4" integrity sha512-66qa6x17+HCqc/tRTwYqSOYHsSAoGPAr4gLJFIQwY/em1JjePDXa2lcBqB3mUrVuMhFyn/CP4fJy2yIE6gwqjw== +"@types/svgo@^2.6.0": + version "2.6.0" + resolved "https://registry.npmjs.org/@types/svgo/-/svgo-2.6.0.tgz#f0c50eed286422f63b4e3346d8a309b0ea67d58a" + integrity sha512-VSdhb3KTOglle1SLQD4+TB6ezj/MS3rN98gOUkXzbTUhG8VjFKHXN3OVgEFlTnW5fYBxt+lzZlD3PFqkwMj36Q== + dependencies: + "@types/node" "*" + "@types/tapable@^1", "@types/tapable@^1.0.5": version "1.0.7" resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4" @@ -8929,7 +8941,7 @@ commander@^6.0.0, commander@^6.1.0, commander@^6.2.0, commander@^6.2.1: resolved "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== -commander@^7.0.0: +commander@^7.0.0, commander@^7.2.0: version "7.2.0" resolved "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== @@ -9457,7 +9469,7 @@ css-tree@1.0.0-alpha.37: mdn-data "2.0.4" source-map "^0.6.1" -css-tree@^1.1.2: +css-tree@^1.1.2, css-tree@^1.1.3: version "1.1.3" resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q== @@ -9577,7 +9589,7 @@ cssnano@4.1.10, cssnano@^5.0.6: is-resolvable "^1.0.0" postcss "^7.0.0" -csso@^4.0.2: +csso@^4.0.2, csso@^4.2.0: version "4.2.0" resolved "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529" integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA== @@ -17251,6 +17263,11 @@ nan@^2.10.0, nan@^2.12.1: resolved "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19" integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ== +nanocolors@^0.1.12: + version "0.1.12" + resolved "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz#8577482c58cbd7b5bb1681db4cf48f11a87fd5f6" + integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ== + nanoid@3.1.20: version "3.1.20" resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788" @@ -22392,6 +22409,19 @@ svgo@^1.0.0: unquote "~1.1.1" util.promisify "~1.0.0" +svgo@^2.7.0: + version "2.7.0" + resolved "https://registry.npmjs.org/svgo/-/svgo-2.7.0.tgz#e164cded22f4408fe4978f082be80159caea1e2d" + integrity sha512-aDLsGkre4fTDCWvolyW+fs8ZJFABpzLXbtdK1y71CKnHzAnpDxKXPj2mNKj+pyOXUCzFHzuxRJ94XOFygOWV3w== + dependencies: + "@trysound/sax" "0.2.0" + commander "^7.2.0" + css-select "^4.1.3" + css-tree "^1.1.3" + csso "^4.2.0" + nanocolors "^0.1.12" + stable "^0.1.8" + swap-case@^2.0.2: version "2.0.2" resolved "https://registry.npmjs.org/swap-case/-/swap-case-2.0.2.tgz#671aedb3c9c137e2985ef51c51f9e98445bf70d9"