readthedocs-fr / bin-server

Un outil pour héberger des snippets de code et les partager via une URL.
https://bin.readthedocs.fr
MIT License
14 stars 15 forks source link

proposal: feat(front): externalize SVGs #145

Closed Mesteery closed 2 years ago

Mesteery commented 2 years ago

This is a proposal. This is the "easiest" way I found to keep the correct style of SVGs without inlining them. (with img or object, the style is lost...)

Julien00859 commented 2 years ago

I did force-push the branch to squash the two commits and to add a commit message.

I've a question about perf, our icons are kinda small svg files so I wonder if we benefit from storing them as separate file. Without this commit python always send the content of the icons which together weight ~1.6kB. Using an external file the browser will send one http request per icon.

Each request is 468 bytes long on my browser which by itself cost more then sending the icon inlined with the html page.

GET http://localhost:8012/assets/icons/new.svg HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://localhost:8012/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: same-origin
Sec-Fetch-Site: same-origin
Pragma: no-cache
Cache-Control: no-cache

We would only benefit from externalizing the icons if the browser caches the icon and doesn't send any http-request to verify its freshness. We can do so using cache-control with a 10-years long max-age and the immutable option but that would require we ensure that every time we change the icon we also change its name on disk.

What do you think we can add a version (e.g new-1.svg) to the name of each icon ?

Mesteery commented 2 years ago

What do you think we can add a version (e.g new-1.svg) to the name of each icon ?

This can be done by the bundler with a hash, #141 or #144 (+ svgo for this)!