如何配置Razzle.js以服务于来自多个CDN的应用程序资产



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

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

使用类似的东西(基于文件名(来确定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)
}),
}
}

最后,这个包有助于:https://github.com/agoldis/webpack-require-from

只需确保使用以下内容加载全局函数:

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

相关内容

最新更新