Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Use content hashing for font and image URLs #8159
This adds new builds steps to Webpack in order to transform font and image URLs by appending a content hash to the output location so that we can then use a long cache lifetime while still adding new versions easily.
Since fonts and images shouldn't change very often, they remain outside of the "bundles" used for CSS and JS. Instead, only the output file name is changed. The directory structure is unchanged. This does make it a bit harder to prune old images compared to the bundles, but most likely there won't be too many versions of images anyway.
This change includes support for the Status theme and images in HTML templates. For more details on how image paths work going forward, see matrix-org/matrix-react-sdk#2460.
This adds a `file-loader` rule to the Webpack build so that any requests for image resource will be output into the app's output directory, but with an extra content has appended so that we can safely use a long cache lifetime. The CSS and SCSS rules are also changed to use `css-loader` so that any `url` inside is automatically processed by the new image rule above.
This means that themes which include `light/css/_base.scss` (currently Dark and Status) won't be forced to have Light's font-faces included. This only really matters for Status, which uses different fonts throughout.
Adds a `$res` SCSS variable set to the path from the root SCSS file to the `res` directory. This is a different base path than previously used in CSS URLs (it goes up 3 directories instead of 2), because Webpack will now be resolving images relative to the root SCSS file, so the path corresponds to a source tree location, instead of a path in the build output tree. Defining this variable has two main goals: * URLs are a bit easier to read * The path can be overridden, which is needed for riot-web themes like Status
Expands the image build process to also support the right paths when used in HTML templates.
Thanks, please file an issue with screenshot so we can triage and fix.
There's already #8164, but if you see something else, then please do file.