引入 cdn减少 npm run build 构建体积
https://ant.design/docs/react/introduce-cn
CDN连接：https://unpkg.com/antd/dist/
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <meta name="theme-color" content="#000000" />
  7.   <meta
  8.     name="description"
  9.     content="Web site created using create-react-app"
  10.   />
  11.   <title>Dva工程化配置</title>
  12.   <link rel="apple-touch-icon" href="logo192.png" />
  13.   <!--
  14.   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
  15.   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  16.       Notice the use of %PUBLIC_URL% in the tags above.
  17.       It will be replaced with the URL of the `public` folder during the build.
  18.       Only files inside the `public` folder can be referenced from the HTML.
  20.       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
  21.       work correctly both with client-side routing and a non-root public URL.
  22.       Learn how to configure a non-root public URL by running `npm run build`.
  23.     -->
  24.   <link href="https://cdn.bootcdn.net/ajax/libs/antd/4.19.5/antd.min.css" rel="stylesheet">
  25.   <link rel="stylesheet" href="index.css" />
  26. </head>
  27. <body>
  28.   <noscript>You need to enable JavaScript to run this app.</noscript>
  29.   <div id="root" class="root"></div>
  30.   <!-- 针对 antd3.x，不需要兼容IE的 忽略 polyfill.js -->
  31.   <script src="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.min.js"></script>
  32.   <script src="https://cdn.bootcdn.net/ajax/libs/react/18.0.0/umd/react.development.js"></script>
  33.   <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.js"></script>
  34.   <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.19.5/antd-with-locales.min.js"></script>
  35.   <script src="/index.js"></script>
  36. </body>
  37. </html>

index.html

首先引入 antd.css的样式表
再次引入相关JS类库，因为类库之间有依赖关系，不要改变顺序
编写 text/babel 代码，使用antd组件需要加上 antd. 才能正常使用，或者使用解构赋值，导出相关组件

  1. 依赖 react、react-dom、moment
  2. 需要引入babel，且指定script 的类型为 type=”text/babel”. 否则会报错
    1. Uncaught SyntaxError: Unexpected token ‘<’
  3. 文件头需要指定字符集utf-8, 否则会报错
    1. SyntaxError: Invalid regular expression
  4. 开发用 production.min.js，上线用 production.min.js
    1. when deploying, replace “development.js” with “production.min.js”

image.png

  1. <html lang="en">
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <meta name="viewport"
  5.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Antd</title>
  8.   <link href="https://cdn.bootcdn.net/ajax/libs/antd/4.15.1/antd.min.css" rel="stylesheet">
  9. </head>
  10. <body>
  11. <div id="root"></div>
  13. <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  14. <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
  15. <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
  16. <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  17. <script src="https://cdn.bootcdn.net/ajax/libs/antd/4.15.1/antd-with-locales.js"></script>
  19. <script type="text/babel" data-presets="env,stage-3,react">
  20.   const { ConfigProvider, DatePicker, Button, message } = antd;
  22.   function App() {
  23.     const [ date, setDate ] = React.useState(moment);
  24.     const handleChange = value => {
  25.       message.info(`您选择的日期是: ${value ? value.format('YYYY-MM-DD') : '未选择'}`);
  26.       setDate(value);
  27.     };
  29.     return (
  30.       <ConfigProvider>
  31.         <DatePicker onChange={handleChange} value={date}/>
  32.         <div>
  33.           当前日期：{date.format('YYYY-MM-DD')}
  34.         </div>
  35.         <Button type="primary">提交</Button>
  36.       </ConfigProvider>
  37.     );
  38.   }
  40.   ReactDOM.render(<App/>, document.getElementById('root'));
  41. </script>
  42. </body>
  43. </html>

script中的 async 和 defer

script标签中的async和defer
https://www.cnblogs.com/jiasm/p/7683930.html

async

async的设置，会使得script脚本异步的加载并在允许的情况下执行async的执行，
并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行

defer

如果script标签设置了 defer属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；
如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；
defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行

  1. <script async defer src="http://www.google.cn/maps/api/js?key=AIzaSyA5bpEs3xlB8vhxNFErwoo3MXR64uavf6Y&callback=initMap"></script>