如何配置 Razzle.js 以提供来自多个 CDN 的应用程序资产？答案

【问题标题】：How can I configure Razzle.js to serve the app assets from several CDNs?如何配置 Razzle.js 以提供来自多个 CDN 的应用程序资产？
【发布时间】：2020-04-22 01:29:02
【问题描述】：

浏览器通常会限制来自给定子域的最大并行加载量。因此，我想将资产加载分散到 4 个 CDN：

使用类似这样的东西（基于文件名）来确定 cdn 编号：

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

如何在 Razzle 中做到这一点？

到目前为止，这就是我所拥有的。在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)
      }),
    }
 }

【问题讨论】：

标签： webpack cdn razzle

【解决方案1】：

最后，这个包帮助了：https://github.com/agoldis/webpack-require-from

只需确保使用类似这样的方式加载全局函数：

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

【讨论】：