Hash in file name (replace index.html srcs in production, also using css) #39

frederikhors · 2019-05-25T15:55:57Z

Any hint to build with hash in file name?

Conduitry · 2019-05-29T13:05:49Z

You could try this plugin, which I have not tested. You'd also need some way to know what the filename is when generating the <script> tag in index.html.

frederikhors · 2019-06-16T16:12:03Z

@Conduitry that plugin is still no longer needed (https://twitter.com/rich_harris/status/1079991930623283200).

This is a serious problem.

Every time I need to delete my browser cache! This can't go in production as it is.

I tried with rollup-plugin-bundle-html (https://github.com/haifeng2013/rollup-plugin-bundle-html) but as you can see the author is not so much active on the project.

Something is moving on here: vladshcherbin/rollup-plugin-copy#21 but there are still problems with css, especially if I'm using .scss files.

Any hint?

lukeed · 2019-06-16T16:51:18Z

What is it you're trying to do? I don't think it's clear yet.

Seemed that you were after filename hashing (which has been solved) but not sure what the production-blocking problem is or why your browser cache is coming into question.

frederikhors · 2019-06-16T16:59:10Z

Ok. Using this svelte base template I would like to use hash in file name when in production and not when in development.

For this to work I need to change index.html's src="".

Using also an .scss import like this:

import './style.scss'

in my main.js needs the same index.html treatment.

Is the problem clear now?

EDIT:

I'm using rollup-plugin-postcss but still I have problem for css hash file name and index.html replace.

It seems in rollup world nobody has been interested in it before.

VincentDauliac · 2019-07-20T21:02:16Z

I'm also facing this problem.
This is critical for cache invalidation in a production env.
@frederikhors Did you finally find a way to add a hash to the css file filename and change the index.html accordingly.
I was able to do it for js chunks, but not css...

evdama · 2019-07-21T03:26:42Z

So, you guys want to have something like <a has of say 20 random chars>.main.css. That's what the build process should create as a file. In addition, obviously, you want that exact filename put in your index.html or template.html or whatever your app entry point is yes?

well, if you just set emitCSS: false for example, you don't have that concern afaict because your CSS is inlined anyway. Otherwise if you build with emitCSS: true then you might be correct and you'll always have that constant_name.css. But even then, a proper chain of cache-control caches starting with a browser cache, the CDN and so on should handle that for you without the need for hashing the filename. CDNs do has the file you know, then compare the new arrival with what they have on store, then look up cache-control in order to decide what to do with the new/old file. Not sure if all CDNs handle that but many do...

metonym · 2019-09-04T02:05:40Z

@frederikhors @VincentDauliac

One solution is to hash the CSS/JS files after the static assets are built using PostHTML.

Example repo

After hashing, the index.html would look something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Svelte Rollup Template</title>
-   <link rel="stylesheet" href="bundle.css">
+   <link rel="stylesheet" href="bundle.b19ea05c629cee24e7b1.css">
  </head>
  <body>
-   <script src="bundle.js"></script>
+   <script src="bundle.3df36d777ae1e0db2646.js"></script>
  </body>
</html>

Niek · 2020-06-23T10:31:12Z

Another option is to use @rollup/plugin-html. Here's a sample rollup config: https://github.com/Niek/obs-web/blob/master/rollup.config.js

pablote · 2020-07-02T00:58:55Z

Here's my current rollup.config.js, with file hashing halfway figured out. I haven't found a way to hash the styles files in a way that the file would show up in the html() section to be added dynamically. Maybe someone can help with that one.

I wish some of this stuff were part of the template, so I wouldn't have to figure it out for myself. Like babel, emitCss:true so there's a single style bundle, hashing and html generation, which as far as I know is the safest way to handle cache busting across deployments. But everytime I search these things, official answer seems to be "sapper does it right, use that".

Hope you find this useful.

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import visualizer from "rollup-plugin-visualizer";
import html from "@rollup/plugin-html";
import copy from "rollup-plugin-copy";
import scss from "rollup-plugin-scss";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";
import postcss from "postcss";
import autoPreprocess from "svelte-preprocess";
import svg from "rollup-plugin-svg";
import indexTemplate from "./indexTemplate";

const production = !process.env.ROLLUP_WATCH;

export default {
    input: "src/main.js",
    output: {
        sourcemap: true,
        format: "iife",
        name: "app",
        dir: "build/",
        entryFileNames: "bundle.[hash].js"
    },
    plugins: [
        copy({
            targets: [{ src: "static/*", dest: "build/" }]
        }),
        scss({
            output: "build/bundle.css",
            processor: css =>
                postcss([
                    autoprefixer,
                    cssnano({
                        preset: [
                            "default",
                            {
                                discardComments: {
                                    removeAll: true
                                }
                            }
                        ]
                    })
                ])
                    .process(css, { from: undefined })
                    .then(result => result.css)
        }),
        svg({ base64: false }),
        svelte({
            dev: !production,
            emitCss: true,
            onwarn: (warning, handler) => {
                // if (warning.code === 'a11y-autofocus') return;
                handler(warning);
            },
            preprocess: autoPreprocess()
        }),
        resolve(),
        commonjs(),
        production &&
            babel({
                exclude: ["node_modules/@babel/**", "node_modules/core-js/**"],
                extensions: [".js", ".mjs", ".html", ".svelte"]
            }),
        html({
            title: "My App Title",
            meta: [{ charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }],
            publicPath: "/",
            template: opts => {
                return indexTemplate({
                    ...opts,
                    extraLinks: [{ fileName: "bundle.css" }]
                });
            }
        }),
        !production && livereload("build/index.html"),
        production && terser(),
        production &&
            visualizer({
                filename: "stats.html",
                open: true,
                template: "sunburst"
            }),
    ]
};

zidell · 2020-12-15T01:53:07Z

I used a bit of anomaly. But it works well.

// rollup.config.js
import fs from 'fs';
...
function insertHashToIndex() {
	return {
		writeBundle() {
			const stats = fs.statSync('public/build/bundle.js');

			let indexHtml = fs.readFileSync(`public/index.html`, 'utf8');
			indexHtml = indexHtml
				.replace(
					/\/global\.css(\?_=[0-9\.]+)?/,
					'/global.css?_=' + stats.ctimeMs
				)
				.replace(
					/\/build\/bundle\.css(\?_=[0-9\.]+)?/,
					'/build/bundle.css?_=' + stats.ctimeMs
				)
				.replace(
					/\/build\/bundle\.js(\?_=[0-9\.]+)?/,
					'/build/bundle.js?_=' + stats.ctimeMs
				);

			// You can create a new file if you don't want to make a mutable modification.
			fs.writeFileSync(`public/index.html`, indexHtml);
		},
	};
}

export default {
	...
	plugins: [
		...
		production && insertHashToIndex(),
	]
};

This method changes index.html every time it builds as follows.

...
	<link rel='stylesheet' href='/global.css?_=1607996277779.0574'>
	<link rel='stylesheet' href='/build/bundle.css?_=1607996277779.0574'>
	<script defer src='/build/bundle.js?_=1607996277779.0574'></script>
...

frederikhors · 2020-12-15T08:37:29Z

And what if the css is the same? Why the invalidation based on time?

zidell · 2020-12-15T12:39:25Z

And what if the css is the same? Why the invalidation based on time?

That's right. My method was based on the time of bundle.js. Therefore, the disadvantage is that unnecessary cache-busting occurs as you say. The advantage is that cache-bursting works without complex settings and dependencies.

targumon · 2020-12-15T18:08:18Z

@metonym

Thanks for your template!

Note that rollup-plugin-svelte 7.0.0 has a breaking change so you might want to:

import css from 'rollup-plugin-css-only'

and add the following to the plugins array:

css({ output: 'bundle.[hash].css' }),

guojenman · 2020-12-20T21:49:44Z

doesn't seem like rollup-plugin-css-only supports hashing

thgh/rollup-plugin-css-only#25 (comment)

brgrz · 2021-04-04T18:02:09Z

Coming from Angular/Webpack this is such a common/basic requirement it should be available with Svelte/Rollup out of the box. I only just noticed this after several months working on a new project where I didn't find a single thing missing from Svelte but this certainly is lacking.

Would it be possible for the team to bring in @metonym 's solution to this template?

muttoni · 2021-04-30T08:22:26Z

I'm working on a project that won't get high traffic but absolutely requires the latest version of every asset, so while it's not as efficient as a content-based hash, it's quick and effective with no dependencies. thanks @zidell

Coming from Angular/Webpack this is such a common/basic requirement it should be available with Svelte/Rollup out of the box. I only just noticed this after several months working on a new project where I didn't find a single thing missing from Svelte but this certainly is lacking.

Would it be possible for the team to bring in @metonym 's solution to this template?

I agree this should be made available in the default config. While the maintainers may argue that SvelteKit / Sapper does this out of the box, I find that for a statically-hosted website (S3, Cloudflare pages, etc), using pure svelte + a basic router is incredibly effective (and a truly wonderful experience), rather than have to manually "export" the site (e.g. __sapper__/export ). And in those cases, having an efficient way to invalidate production content is necessary!

pablote · 2021-06-27T21:53:23Z

For anyone still stuck at this, I recommend you to checkout vite as a replacement for the rollup based tooling (I think it still uses rollup internally in some capacity). I've recently migrated a medium-ish plain svelte project to it and it was a breeze, and it generates some nice hashed bundles both for js and css with almost no configuration.

djKianoosh · 2021-08-18T18:28:29Z

I know this project uses rollup, but I came here off a search looking for file hashing in snowpack. For those using snowpack with svelte, it looks like there are a few options until snowpack itself supports this via esbuild:

Plugins:

until snowpack itself supports this via esbuild:
TylorS/snowpack-plugin-hash#14
|-> evanw/esbuild#1001
|---> FredKSchott/snowpack#3402

I used the first snowpack plugin above, which has the most downloads. Though the last one has zero dependencies, soooo, up to you...

npm i -D snowpack-plugin-hash

My snowpack config looks like:

  plugins: [
    '@snowpack/plugin-svelte',
    [
      '@snowpack/plugin-sass',
      {
        native: true,
      },
    ],
    [
      'snowpack-plugin-hash',
      // Entirely optional object. Showing default values
      {
        // Configured length of your hashes
        hashLength: 12,
        // Configure log level of plugin, 'error' | 'info' | 'debug'
        logLevel: 'info',
      }
    ],
  ],

frederikhors changed the title ~~Hash in file name~~ Hash in file name (replace index.html srcs in production, also using css) Jun 16, 2019

jeduden mentioned this issue Mar 3, 2020

hashed file names sveltejs/rollup-plugin-svelte#61

Closed

metonym mentioned this issue Jun 24, 2020

Doesn't work with Rollup output.entryFileNames posthtml/posthtml-hash#45

Closed

antony added the question label Jul 30, 2020

greengiraffe mentioned this issue Aug 13, 2020

Figure out cache-busting using hashs in bundle filenames greengiraffe/svelte-hn#4

Open

antony added the stale label Aug 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hash in file name (replace index.html srcs in production, also using css) #39

Hash in file name (replace index.html srcs in production, also using css) #39

frederikhors commented May 25, 2019

Conduitry commented May 29, 2019

frederikhors commented Jun 16, 2019

lukeed commented Jun 16, 2019

frederikhors commented Jun 16, 2019 •

edited

Loading

VincentDauliac commented Jul 20, 2019

evdama commented Jul 21, 2019

metonym commented Sep 4, 2019 •

edited

Loading

Niek commented Jun 23, 2020

pablote commented Jul 2, 2020

zidell commented Dec 15, 2020 •

edited

Loading

frederikhors commented Dec 15, 2020

zidell commented Dec 15, 2020

targumon commented Dec 15, 2020

guojenman commented Dec 20, 2020

brgrz commented Apr 4, 2021

muttoni commented Apr 30, 2021 •

edited

Loading

pablote commented Jun 27, 2021

djKianoosh commented Aug 18, 2021

Hash in file name (replace index.html srcs in production, also using css) #39

Hash in file name (replace index.html srcs in production, also using css) #39

Comments

frederikhors commented May 25, 2019

Conduitry commented May 29, 2019

frederikhors commented Jun 16, 2019

lukeed commented Jun 16, 2019

frederikhors commented Jun 16, 2019 • edited Loading

VincentDauliac commented Jul 20, 2019

evdama commented Jul 21, 2019

metonym commented Sep 4, 2019 • edited Loading

Niek commented Jun 23, 2020

pablote commented Jul 2, 2020

zidell commented Dec 15, 2020 • edited Loading

frederikhors commented Dec 15, 2020

zidell commented Dec 15, 2020

targumon commented Dec 15, 2020

guojenman commented Dec 20, 2020

brgrz commented Apr 4, 2021

muttoni commented Apr 30, 2021 • edited Loading

pablote commented Jun 27, 2021

djKianoosh commented Aug 18, 2021

frederikhors commented Jun 16, 2019 •

edited

Loading

metonym commented Sep 4, 2019 •

edited

Loading

zidell commented Dec 15, 2020 •

edited

Loading

muttoni commented Apr 30, 2021 •

edited

Loading