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文件位于不同的子域中，例如：

页面：http：// www .myweb.com /
js文件：http：// cdn .myweb.com /

页面加载时，它会向CDN请求基本js文件：

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 Lazy从另一个子域请求文件（在这种情况下，它将是“ cdn.myweb.com ”而不是“ www.myweb”。 com ”（托管html页面）。

在此先感谢您，我的英语不好。

Answer 1

解决方案是在webpack配置中： 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/'
  }
};

从CDN懒反应导入

1 个答案: