i18n assets need to be cache busted

[ara4n]

Currently they are blindly copied to /i18n and /home respectively. Instead they should be put into a bundle/$hash subdirectory or something.

[ara4n]

I've dialed down the caching on the webserver for /i18n in theory, but it's still causing problems, as per #4115

[richvdh]

home page is covered by #4239

[richvdh]

I looked briefly at doing this. The situation is as follows:

The $hash in bundle/$hash is generated by webpack. There are therefore two options: (a) let webpack run, then do another step in the build which figures out the $hash chosen by webpack and copies the resources in; (b) do the copy with webpack.

(a) is unattractive due to the requirement to add another build step, and because it will be a Right Pain (TM) to get it to work under the webpack dev server. We'd also have to get the URL for the language files back into the main bundle somehow, which is somewhat circular. I'm not keen on this option.

So I looked into (b). The trouble with webpack is that there are 15 ways to skin any given cat, none of which work. Here are some things I tried:

• use the copy-webpack-plugin to copy the files. Unfortunately there appears to be no way to get the plugin to put the copies into the bundle/$hash directory (and even if you did, how do we then get the URL back into the languageHandler?)

• specify each of the language resources as an additional entry module (via automation in webpack.config.js, presumably - I didn't try). When you do this, webpack likes to wrap the json into a executable javascript file (adding the webpack bootstrap code to give a script which ends up being a no-op). We might be able to unpick it again but it feels like we are fighting against the tools at this point.

• include the i18n files in index.js, and use webpack code splitting to split them out into chunks; something like (instead of the current request call in languageHandler):

  require(['../../lib/i18n/en_EN.json'], function(lang_json) { ... });
  

  This would need doing explicitly for each separate language (otherwise it lumps them all into one chunk), which would mean a code-gen step.

• include the i18n files using something like const i18nContext = require.context('../../lib/i18n/', true, /\.json$/);. This returns a function which you can call to get the original json back: lang_json = i18Context('en_EN.json');. But we don't want to embed all of the translations into the riot-web bundle (I assume), so use the file-loader to extract them to files:

  loaders: [
          {
              test: /i18n\/.*\.json$/,
              loader: "file",
              query: {
                  name: "[name].json",
              },
          }
  ]
  

  - which has the effect that i18Context('en_EN.json'); will instead return to the URL where the file can be retrieved (so could be fed into the languageHandler). The only problem with this is that, again, there is no way to get the plugin to put the files into the bundle/$hash directory.

At that point I ran out of battery and went to bed. To me the final approach (using file-loader) looks most promising, but we might have to patch file-loader.

[jryans]

@bwindels is working on this in #8710.

[jryans]

Fixed in #8710