react 优化一、工程目录结构划分二、路由鉴权三、退出登录四、路由懒加载打包优化：效果 1：效果 2：效

一、工程目录结构划分

工程目录.png

二、路由鉴权

路由鉴权.png

三、退出登录

退出登录.png

四、路由懒加载

打包优化：

懒加载.png

效果 1：

懒加载1.png

效果 2：

懒加载2.png

效果 3：

懒加载3.png

五、antd 组件库-上传组件

<Upload> 组件 onChange 上传文件改变时的回调，上传每个阶段都会触发该事件。

上传过程中不断执行默认机制。

六、采用CDN和打包分离技术减小build包体积，实现前端优化手段。

CDN 动态插入 /public/index.html

...
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <!-- 加载第三发包的 CDN 链接 -->
  <% htmlWebpackPlugin.options.files.js.forEach(cdnURL => { %>
  <script src="<%= cdnURL %>"></script>
  <% }) %>
</body>

craco.config.js(webpack 的配置)

const path = require("path");
const { whenProd, getPlugin, pluginByName } = require("@craco/craco");

module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    configure: (webpackConfig) => {
      let cdn = {
        js: [],
      };
      whenProd(() => {
        // key: 不参与打包的包(由dependencies依赖项中的key决定)
        // value: cdn文件中 挂载于全局的变量名称 为了替换之前在开发环境下
        webpackConfig.externals = {
          react: "React",
          "react-dom": "ReactDOM",
          dayjs: "dayjs",
          antd: "antd",
        };
        // 配置现成的cdn资源地址
        // 实际开发的时候 用公司自己花钱买的cdn服务器
        cdn = {
          js: [
            "https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.12/dayjs.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/antd/5.19.3/antd.min.js",
          ],
        };
      });

      // 通过 htmlWebpackPlugin插件 在public/index.html注入cdn资源url
      const { isFound, match } = getPlugin(
        webpackConfig,
        pluginByName("HtmlWebpackPlugin")
      );

      if (isFound) {
        // 找到了HtmlWebpackPlugin的插件
        match.userOptions.files = cdn;
      }

      return webpackConfig;
    },
  },
};

参考链接：