Dynamically import only the needed i18n files

[iiirxs]

This PR adds the appropriate logic so that the code only imports dynamically the translation messages for the languages that are actually needed, instead of loading the messages for all languages.

Regarding, the built artifacts, the wikipedia-preview.umd.cjs will continue to load all translation messages, as this is intended to be used as standalone file that contains the whole library. However, the wikipedia-preview.js ESM module will now only load the translation messages for the required families.

Steps followed for testing:

• npm run build
• Create a directory named "dynamic-import-test"
• Inside this directory create a JS file named "app.js" with the following content:

import wikipediaPreview from '../dist/wikipedia-preview.js'

wikipediaPreview.init( {
	root: '.content > p, .footer > p',
	detectLinks: true,
	lang: 'fr',
	debug: true
} )

• Inside the same directory create a vite config file named vite.config.app.js with the following contents (mostly copied from vite.config.js file:

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import commonjs from 'vite-plugin-commonjs'
import fs from 'fs'
import childProcess from 'child_process'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  plugins: [
    commonjs()
  ],
  define: {
    APP_VERSION: JSON.stringify(JSON.parse(fs.readFileSync('./package.json')).version),
    GIT_HASH: JSON.stringify(childProcess.execSync('git rev-parse --short HEAD').toString().trim())
  },
  build: {
    target: 'es2015',
    lib: {
      entry: resolve(__dirname, './app.js'),
      name: 'app',
      fileName: 'my-app',
    },
    sourcemap: true,
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        assetFileNames: 'my-app.[ext]',
        dir: 'app',
      }
    }
  }
})

• Build the new files to use them directly inside HTML: vite build --config ./dynamic-import-test/vite.config.app.js

• Then inside demo/articles/french.html:

  1. Add the styles inside the :

      <link href="../../dist/wikipedia-preview-link.css" rel="stylesheet" type="text/css"/>
      <link href="../../dist/wikipedia-preview.css" rel="stylesheet" type="text/css"/>
  

  2. Comment out the previous <script> tags and add this one: <script src="../../app/my-app.js"></script>

• Finally, test that the french.html file only loads the required messages.

[hueitan]

Thanks @iiirxs for the PR. This aligns with the work in Phabricator ticket T282727. Backward compatibility must be supported, the changes should also work for the Wikipedia Preview WordPress plugin, and this should be documented in the README.md file to explain its usage.