Реагировать на ленивый импорт из CDN

Question

Я следую этому руководству по отложенной загрузке с использованием React Router и Suspense:

https://itnext.io/async-react-using-react-router-suspense-a86ade1176dc

, и этот код у меня есть:

import React, { lazy, Suspense } from 'react';
import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';

const HomePage = (
  lazy(() => (
    import('./pages/HomePage')
  ))
);

const BookingsPage = (
  lazy(() => (
    import('./pages/BookingsPage')
  ))
);

const LoadingMessage = () => (
  <div>I'm loading...</div>
);

class AppProviders extends React.Component {
  constructor (props) {
    super(props);
  }

  render () {
    return <Router>
          <div>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/bookings">Bookings</Link></li>
            </ul>
            <hr />
            <Suspense fallback={<LoadingMessage />}>
              <Switch>
                <Route exact path="/" component={HomePage} />
                <Route path="/bookings" component={BookingsPage} />
              </Switch>
            </Suspense>
          </div>
        </Router>
  }
};

export default AppProviders;

Код разделен, как и ожидалось, но проблема в том, что страница (html) и файлы js размещены в разных поддоменах, например:

• page: http://www.myweb.com/
• js файлы: http://cdn.myweb.com/

Когда страница загружается, она запрашивает базовый js-файл из cdn:

• http://cdn.myweb.com/js/main.js

, но затем main.js запрашивает другие чанкис www.myweb.com:

• http://www.myweb.com/js/1.js
• http://www.myweb.com/js/2.js

, которые возвращают 404.

Есть ли способ сказать React ленивыйзапросить файлы из другого субдомена (в данном случае это будет « cdn.myweb.com » вместо « www.myweb.com », где размещена html-страница).

Могу заранее поблагодарить и извинить за плохой английский.

Answer 1

Решение находится в конфигурации веб-пакета: output.publicPath

https://webpack.js.org/configuration/output/#output-publicpath:

Это важная опция при использовании загрузки по требованию или загрузка внешних ресурсов , таких как изображения, файлы и т. Д. Если указано неправильное значение, при загрузке этих ресурсов вы получите 404 ошибки.

Примерна этой же странице:

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/'
  }
};