Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use content hashing for font and image URLs #8159

Merged
merged 5 commits into from Jan 18, 2019

Conversation

@jryans
Copy link
Member

jryans commented Jan 18, 2019

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.

Fixes #7932
Depends on matrix-org/matrix-react-sdk#2460

@jryans jryans requested review from ara4n and vector-im/riot-web and removed request for ara4n Jan 18, 2019
jryans added 5 commits Dec 31, 2018
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.
This allows home.html to remain a regular HTML file without templating while
still having a copy of the rooms directory icon.
@jryans jryans force-pushed the jryans/versioned-img-urls branch from 2a0ce89 to aa388f1 Jan 18, 2019
@jryans

This comment has been minimized.

Copy link
Member Author

jryans commented Jan 18, 2019

Removing review request for now. There are still a few issues with Karma tests to fix.

@jryans jryans requested review from vector-im/riot-web and removed request for vector-im/riot-web Jan 18, 2019
@jryans

This comment has been minimized.

Copy link
Member Author

jryans commented Jan 18, 2019

Karma tests do pass here, but with some warnings when images load. I don't think we need to block this work for that, as we can improve it later and it has no impact on the tests themselves.

@turt2live turt2live self-assigned this Jan 18, 2019
@turt2live turt2live assigned jryans and unassigned turt2live Jan 18, 2019
@jryans jryans merged commit d71e84b into experimental Jan 18, 2019
2 checks passed
2 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@NotAFile

This comment has been minimized.

Copy link
Contributor

NotAFile commented Jan 18, 2019

This has broken most of the image loading for me, fyi.

This might just be because /experimental isn't adjusted to these changes yet?

@jryans

This comment has been minimized.

Copy link
Member Author

jryans commented Jan 18, 2019

This has broken most of the image loading for me, fyi.

This might just be because /experimental isn't adjusted to these changes yet?

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.

@NotAFile

This comment has been minimized.

Copy link
Contributor

NotAFile commented Jan 18, 2019

There's already #8164

yep, that looks pretty much like what's happening for me!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.