-
Notifications
You must be signed in to change notification settings - Fork 215
Serve hashed image URLs #229
Comments
Did you mean it like this? import successkid from './successkid.jpg';
<img alt='Success Kid' src={successkid}> It looks like the rollup plugin does not return a URL? |
Here's the code: https://github.com/benmccann/sapper-template-rollup/tree/image It serves the image at http://localhost:3001/client/static/465898c830bb9d2c.jpg |
That looks pretty awesome! Why does the image have to be exported? |
I’m pretty sure you can achieve this just with an import statement. |
@benmccan One drawback is that you can't link to a file that might change once in a while. (or do you host both? In that case you get duplicates in CDNs can cache based on query params, so how about this url structure: |
Yes. Thanks for pointing that out. That's much better! |
I'm assuming you mean a link from an external site. As long as it's a link from within the app it shouldn't present any difficulty
Some or probably most can, but my understanding is that it doesn't work universally. Here's an old, but still popular, article suggesting file names are better. I'm not as worried about that though as avoiding extra serving complication. It'd be nice to be able to take all your static files, output them to a build directory with hash, and tell your server the files are all cacheable forever. It's more complicated to tell your server, these files are cachable forever if they have a query string (in the format of a hash?), but not cachable if there's no query string (or it's in the wrong format?). Luckily it's configurable, so easy for folks to change if they prefer a different strategy. We're doing all the hard setup work here, so it'd only be changing a couple lines to put in the query string instead of file name for cases where that's preferred. I think the best default is to just use Rollup's default and let folks configure it from there |
I found that this will not work in many cases due to a bug in Sapper, so we'll need to wait for sveltejs/sapper#1246 to be merged and a new release including that change before submitting a PR here. Edit: this was released 0.27.14 |
@pngwn Is it possible to hash urls in CSS (background, etc) with import statements? |
It sounds like https://github.com/postcss/postcss-url is used a lot for CSS. I also found https://github.com/sormy/rollup-plugin-smart-asset |
@benmccann didn't know https://github.com/postcss/postcss-url could also do hashing. Thanks for the tip. So that means hashing in CSS must be done implicitly, but JS explicitly. Still feel quite uneasy. |
Implementing this for Webpack requires sveltejs/sapper#1342 |
Can this be applied to |
I haven't tried. Not sure if Svelte does anything special with that file, but if it's just a standard file I'm not sure why it wouldn't work |
I did a brief attempt at it and it claims that the CSS file does not have a default export. I didn't get past that so I dropped it. |
Right now images are included simply as:
However, this means that images can't be cached, served by a CDN, etc. Both Rollup and Webpack support doing an image
import
which returns an image name containing a hash:https://github.com/rollup/plugins/tree/master/packages/url
https://webpack.js.org/loaders/file-loader/
This seems like a reasonable default setting that's inline with Sapper's focus on performance. What do people think about this?
The text was updated successfully, but these errors were encountered: