从反应CDN懒进口

问题描述 投票:1回答:1

我使用的阵营路由器和悬念按照本指南以延迟加载:

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.没有Web.com/就是/卖弄.就是

但随后main.js请求来自www.myweb.com其他块:

  • HTTP://呜呜呜.没有Web.com/就是/1.就是
  • HTTP://呜呜呜.没有Web.com/就是/2.就是

它会返回404。

有没有办法告诉懒做出反应,从不同的子域名请求的文件(在这种情况下,将“cdn.myweb.com”而不是“www.myweb.com”,在HTML页面托管)。

可在此先感谢,并原谅我的英语不好。

reactjs webpack react-router lazy-loading
1个回答
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/'
  }
};
© www.soinside.com 2019 - 2024. All rights reserved.