使用 React JS CDN 并发布到产品问题答案

【问题标题】：Using React JS CDN and publishing to productions questions使用 React JS CDN 并发布到产品问题
【发布时间】：2021-11-27 11:30:27
【问题描述】：

我正在使用 ReactJS CDN 构建 Web 应用程序。我正在考虑将其托管在充当 Web 服务器的 qliksense 服务器中。代码运行良好，没有任何问题，用户可以通过 URL 访问应用程序。

在投入生产之前，我有几个问题。

我想知道这样做的缺点。
我应该考虑哪些因素？
如何缩小代码？

下面是我的代码的概要结构。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js">
</script>

    <script crossorigin src="https://unpkg.com/@mui/material@5.0.2/umd/material-ui.production.min.js"></script>

    
    <script src="https://unpkg.com/@babel/standalone@7.15.7/babel.min.js"></script> 
   <script type="text/babel" src="AppPage.js"></script>
    <script type="text/babel" src="App.js"></script>
   
    <link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
    <link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
    
    
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <App/>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

App.js

function App(){

    const [state, setState] = React.useState(false);
  
    

    React.useEffect(()=> {
    //Do Something
    //setState(object)
    },[])
  
       
   return (
        <div id="appcontainer">
   {state.errorMessage !== null ? 
   <div> 
   <h6>{state.errorMessage}</h6>
   <h6>Refresh page or Contact support </h6>
   </div>
   : state.app ?
     <Box> <AppPage/> </Box> : null}
        </div>
    )
  }

AppPage.js

function AppPage(){

    
       
   return (
  <h1>hello</h1>
   
    )
  }

【问题讨论】：

标签： reactjs hosting qliksense

【解决方案1】：

我能想到的唯一缺点是最终用户可能无法访问 CDN。如果您在公司代理/防火墙后面，并且由于某种原因 CDN 被阻止，那么混搭将无法工作。

假设您是在 Qlik Dev Hub 内进行开发，我是对的？如果是这种情况，那么为了缩小代码，您必须下载代码缩小它（例如使用 webpack），然后将其重新上传回 Qlik

我们的 Web 开发人员实际上是在 Qlik 之外开发混搭 - 在 localhost 上开发并直接与 Qlik 建立连接。一旦他们对结果感到满意，他们就会将其缩小并上传。所以他们的开发完全在 Dev Hub 之外完成。这里的缺点是需要做更多的工作来设置身份验证，因为在 Dev Hub 中开发时，身份验证已经完成。

【讨论】：

是的，这是使用功能 api 在 dev-hub 上构建的 qilk mashup，因为身份验证因素由 qlik 处理，并且可以在 qlik 意义上完成托管。用户在网络内使用时可以访问测试应用程序。你能发一个例子来缩小它吗？
对不起，我不是一个反应型的人
不用担心，谢谢