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;
        };