React实践基于Antd 后台----React 按需加载

React 按需加载 方法(一)

1. 创建React项目

   安装 create-react-app

   npm i -g create-react-app yarn
   create-react-app admin
   cd admin
   yarn start

    

2. 优化React项目

   删除多余文件，修改多余代码

   只保留文件如下：

   index.js 入口
   registerServiceWorker.js pwa用到的文件

    

   当前目录下新建components文件夹作为组建位置

   安装必须需要的插件

   yarn add axios react-router-dom babel-polyfill
   yarn add less-loader less 安装less作为antd自定义主题使用

    

3. 安装antd

   yarn add antd
   yarn add babel-plugin-import 按需加载less样式。

    

4. 按需加载配置

   暴露出react配置
   yarn eject
   打开配置文件webpack.config.dev.js
   在loader:require.resolve('babel-loader');下面添加
   

   plugins:[
       ['import', [{ libraryName: "antd", style:true}]],
   ]

   如果报错说明安装的less版本太高 请重新yarn add less@^2.7.3

 

React 按需加载 方法(二)

 

1. 1. 同上第一步

   2. 修改启动项配置

      yarn add react-app-rewired
      /* package.json */
      "scripts": {
      -   "start": "react-scripts start",
      +   "start": "react-app-rewired start",
      -   "build": "react-scripts build",
      +   "build": "react-app-rewired build",
      -   "test": "react-scripts test --env=jsdom",
      +   "test": "react-app-rewired test --env=jsdom",
      }

       

   3. 创建配置文件

      名称:config-overrides.js

      module.exports = function override(config, env) {
        // do stuff with the webpack config...
        return config;
      };

       

   4. 安装按需加载模块

      yarn add babel-plugin-import

       

      修改config-overrides.js

      + const { injectBabelPlugin } = require('react-app-rewired');
      ​
        module.exports = function override(config, env) {
      +   config = injectBabelPlugin(
      +     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
      +     config,
      +   );
          return config;
        };

       

   5. 自定义主题

      yarn add react-app-rewire-less

       

      修改config-overrides.js

      const { injectBabelPlugin } = require('react-app-rewired');
      + const rewireLess = require('react-app-rewire-less');
      ​
        module.exports = function override(config, env) {
          config = injectBabelPlugin(
      -     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
      +     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
            config,
          );
      +   config = rewireLess.withLoaderOptions({
      +     modifyVars: { "@primary-color": "#1DA57A" },
      +     javascriptEnabled: true,
      +   })(config, env);
          return config;
        };