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 配置代理

---

找到config -> paths路径配置文件

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('home'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/home.html'),
  appHtmlName:'home.html',
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),//设置代理的配置文件
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

根据指引找到src ->  setupProxy.js  无该文件就添加该文件

 http-proxy-middleware 依赖于此包，如果提示为找到请先安装此包:npm install http-proxy-middleware

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', {
       target: 'http://127.0.0.1:3002',
       pathRewrite: {'^/api' : ''}
    }));
};

create-react-app 按需加载antd  

---

安装此插件  有antd 官网提供的插件

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

 地址：https://github.com/ant-design/babel-plugin-import

找到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'))