Assets fingerprinting with Webpack and Elm

Learn
1

Hello! I’m trying to setup Webpack so that it appends a fingerprint to each compiled asset. For example, image.png might be compiled to image-7d25452ceb63594739af24cde73b6499.png where the fingerprint section ( 7d..99 ) is the hash of the content of the file.

I want to do that to be able to cache assets forever. That is enabled by the fact that the name changes depending on the content.

The problem is that I’m not sure how to have Elm playing nice with that. I see that https://github.com/NoRedInk/elm-assets-loader is deprecated. Is this still a good solution? How do you approach this problem in your Elm apps?

2

This issue is independent of Elm. The fingerprinting of the file name has nothing to do with the Elm compiler or any part of elm.

If you have problems with webpack, please consider using parcel. When you build for production with parcel, it automatically fingerprints the assets.

2 Likes
3

Have you looked into SRI? We’re using the webpack-subresource-integrity plugin which hashes all the assets we’re shipping.

4

Fingerprinting does have something to do with Elm if you have to update the filenames in your code, e.g. img [ src "/myimage.png" ] [] becoming img [ src "/myimage-a1b2c3.png" ] [] in a production build.

We handle this with a custom webpack plugin that adds the hash as a query param so that the filenames don’t change but we still get cache busting.

2 Likes
5

Cool! Is the plugin open source? How would you compare it with https://github.com/NoRedInk/elm-assets-loader?

6

I understand the webpack-subresource-integrity plugin adds some attributes (e.g. integrity) to the html tags but does not touch the urls / names. I think it’s a different use case than mine. Am I mistaken?

7

You may also be interested reading about Webpack Manifest. Shortly, Webpack can generate a JSON file during the build process where original file names are accompanied with their hashed versions. You can load this file in your app via flags, parse it and build a dictionary of original file names and their hashed counterparts. Then it is only about taking right value from this dictionary.

You will however need to always pass this dictionary to your view functions.

2 Likes
8

Cool, that’s a good option! Thanks

9

I’ve decided to go the easy way, I’m importing the images in JavaScript via Webpack and then passing them to the Elm app via flags.
In other words, I’m doing what’s suggested in the docs for create-elm-app. I’d add the link but Discourse does not allow me.

Thanks everybody for the suggestions. I learned a lot by reading them!

1 Like
10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.