create-react-app 一些注意事項以及優化

create-react-app  默認會有eslint語法檢測

去除eslint 語法檢測 找到 webpack.config.dev.js 以下代碼將他註釋就可以去除語法檢測

{
        test: /\.(js|mjs|jsx)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: require.resolve('react-dev-utils/eslintFormatter'),
              eslintPath: require.resolve('eslint'),
              
            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: paths.appSrc,
      }

create-react-app 按需加載antd  

---

安裝此插件

npm install babel-plugin-import --save-dev

找到webpack.config.dev.js

添加：['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]  到options.plugins 下

 {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              customize: require.resolve(
                'babel-preset-react-app/webpack-overrides'
              ),
              plugins: [
                ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
                [
                  require.resolve('babel-plugin-named-asset-import'),
                  {
                    loaderMap: {
                      svg: {
                        ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                      },
                    },
                  },
                ],
              ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
              // Don't waste time on Gzipping the cache
              cacheCompression: false,
            },
          },

 

react-router-dom 的使用方式

---

按需加載：官方案例

https://reacttraining.com/react-router/web/guides/code-splitting

步驟一：安裝

npm install react-loadable

npm install @babel/plugin-syntax-dynamic-import

步驟二：package.json 中找到 babel 配置項

添加@babel/plugin-syntax-dynamic-import

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "@babel/plugin-syntax-dynamic-import",
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]
  }

 步驟三：

以下有兩種模式:

模式一：爲[name].[hash].chunk.js  組合而成

​
import React, { Component } from 'react';
import Loadable from "react-loadable";


const Loading = () => <div>Loading...</div>;
//數字按需加載
 const HomeController = Loadable({
    loader: () => import('./HomeController'),
    loading: Loading
  });
const AboutController = Loadable({
    loader: () => import('./AboutController'),
    loading: Loading
}); 

export default{
    HomeController,
    AboutController
}

​

模式二：通過 import(/* webpackChunkName: "about" */ './AboutController') 自定義名稱 about 就是按需加載的名稱

​
import React, { Component } from 'react';
import Loadable from "react-loadable";


const Loading = () => <div>Loading...</div>;

/**
 * 生成自定義 chunkName 默認已數字按需加載
 */
const HomeController = Loadable({
    loader: () => import(/* webpackChunkName: "home" */ './HomeController'),
    loading: Loading
  });
const AboutController = Loadable({
    loader: () => import(/* webpackChunkName: "about" */ './AboutController'),
    loading: Loading
});
export default{
    HomeController,
    AboutController
}

​

按需加載：非官方案例

步驟一：

創建一個AsyncComponent.js 方法函數

import React, { Component } from "react";

export default function AsyncComponent(importComponent) {
    class AsyncComponent extends Component {
        constructor(props) {
            super(props);

            this.state = {
                component: null
            };
        }

        async componentDidMount() {
            const { default: component } = await importComponent();

            this.setState({
                component: component
            });
        }

        render() {
            const C = this.state.component;

            return C ? <C {...this.props} /> : null;
        }
    }

    return AsyncComponent;
}

第二步 調用使用就簡單的完成了react-router 按需加載

import asyncComponent from "./AsyncComponent"
const HomeController = asyncComponent(() => import('./HomeController'))
const AboutController = asyncComponent(() => import('./AboutController'))