How can I configure Razzle.js to serve the app assets from several CDNs?

Question

Browsers usually restrict the maximum amount of parallel loads from a given subdomain. Therefore, I want to spread asset loading across 4 CDNs:

• https://cdn0.domain.ltd
• https://cdn1.domain.ltd
• https://cdn2.domain.ltd
• https://cdn3.domain.ltd

Using something like this (based on the file name) to determine the cdn number:

"/static/media/asset-name.6d24aee6.png".split('').reduce((a, b) => a + b.charCodeAt(0), 0) % 4

How can I do this in Razzle?

So far, this is what I have. In razzle.config.js:

const PUBLIC_PATH = process.env.PUBLIC_PATH || '/';

module.exports = {
  modify: (config, { dev, target }, webpack) => {
    if (!dev) {
      config.devtool = false;

      // Use the CDN in production
      config.output = {
        publicPath: PUBLIC_PATH
      };
    }

    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env.PUBLIC_PATH': JSON.stringify(PUBLIC_PATH)
      }),
    }
 }

Answer 1

Finally, this package helped: https://github.com/agoldis/webpack-require-from

Just make sure to load the global function using something like this:

if (config.entry.client) {
   config.entry.client.unshift(path.resolve(__dirname, 'globals.js'));
}