搭建react项目——引入antd并实现按需加载及代理设置

近期准备撸一撸react框架，学习学习，记录一下～
之前对react只是有过了解，可以看看代码，但自己没动手过。

首先创建项目（这边直接用的ts版本）

yarn create react-app demo --template typescript

进入项目并启动

cd demo
yarn start

浏览器会自动弹出并访问http://localhost:3000/,然后过一会页面就会出来react的logo，这边是一开始跑就会弹出页面，而不是跑完才弹出，导致要等一会，等它编译完页面才会出来，感觉有点奇怪，orz。

然后引入antd（直接参照的官网）

yarn add antd

然后照着官网指引，写一个demo，这边直接复制的官网的例子
直接修改项目中的文件src/App.tsx

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改src/App.css,在文件顶部引入antd的样式文件

@import '~antd/dist/antd.css';

重新启动就可以发现有个按钮出现了。

然后按照官网介绍的安装craco和craco-less，当时第一次安装的时候我还不太明白craco到底是个啥东西，先不管，之后介绍。

yarn add @craco/craco craco-less

然后修改package.josn文件

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

在项目根目录新建craco.config.js

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },//主题颜色
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

然后把src/App.css改成src/App.less,然后修改样式引用为less文件

/* src/App.ts */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

重新运行项目，可以发现按钮的样式已经修改了。

官网的教程到此为止，到这里，不得不吐槽一下，有一说一，antd官网的这些都要比react中文官网都要好，react官网连个ts例子都没有，相比之下vue的官网就要舒服很多了。话不多说继续探索～

目前为止例子跑起来了，然而还不能运用到开放环境中，首先服务代理还没地方配呢，对接后台接口没这个可不行，react的这个脚手架并没有暴露出配置，所以还得继续找配置的方法。

首先找到了一个暴露配置的方法
运行

yarn eject

这个命令会暴露出webpack的配置，但要求没有任何git更改，之前改动了几个文件就没法执行，然而我也不想就这么提交代码上去，于是我干脆shift+command+.显示出了隐藏文件夹，删除了.git的文件，然后继续执行，执行完了之后根目录下会多一个config文件夹，里面就是webpack的所有配置。

然而看着这么一长串的文件，我的强迫症的内心是拒绝的，然后打开webpack.config.js，又是一长串的配置，看的我眼花缭乱，哇，我整个人都是拒绝的，于是放弃。

回头又去antd的官网上去看了看，发现了这么一句话

• 同样，你可以使用 react-scripts-rewired 和 customize-cra 来自定义 create-react-app 的 webpack 配置。

所以craco还可以拿来配置webpack，然后网上找了一圈，都没有相关的例子，官网也打不开（公司的网比较辣鸡），不得已去npm官网找到这个包看readme文件，发现这个其实和vue差不多，直接在craco.config.js里一样配置就可以了。
知道了怎么一回事，我还加上了2个插件,需要先下载

• webpack-bundle-analyzer：在项目运行之后会弹出一个页面显示编译文件详情。
• compression-webpack-plugin：gzip打包压缩插件

const CracoLessPlugin = require('craco-less');
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    webpack: {
        plugins: [
            new BundleAnalyzerPlugin(),
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    ['js', 'css'].join('|') +
                    ')$'
                ),
                threshold: 1024,
                minRatio: 0.8
            }),
        ]
    },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
    devServer: {
        proxy: {
            "/api": {
                target: "http://xxx.xx.xxx.xx:xxxx",//后台服务地址
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    }
};

顺手点开了package.json,发现所有的依赖包都在dependencies里，强迫症又发作了，于是又是一番操作把工具包和ts类型包全部放在了devDependencies里

运行之后就会自动弹出文件打包详情。如下

看了一下，哇，居然有6M多，稍微有点大，光@ant-design和antd/es就占了三分之一还多，然而我只引用了一个按钮呀。等等，我安装antd的时候，包的名称是antd呀，@ant-design是哪来的，点开文件夹看了下，从文件夹命名的字面意思去理解应该是一些颜色，图标，动画文件等东西，应该是antd的依赖包吧，所以一起下下来了。

好吧，那么接下来就要用按需下载了。依然去网上找了一圈（百度型程序员表示有点羞涩orz），然而并没有找到craco配置按需加载的，antd官网也没有，搜索过程中发现antd官网以前是推荐react-scripts-rewired来配置然后实现按需加载，如今换成了craco还去掉了按需加载的教程orz，网上找到的基本就是2种，一种是用react-scripts-rewired配置，一种是像之前提到的eject暴露配置去设置。

综合了一下，我就先下载了插件

yarn add babel-plugin-import

然后在craco.config,.js里加上

 babel: {
     plugins: [
        [
	        "import", 
	        {
	        	"libraryName": "antd",
	        	"libraryDirectory": "es",
	         	"style": true //设置为true即是less
         	}
     	]
     ]
},

然后在src/App.less中去除样式引入，按需加载之后只需引入组件即可，无需在额外引入样式文件，babel会自动按需帮你完成样式的引入。
然后运行项目弹出
大小只有2M，一下缩小了三分之二，然后访问页面按钮样式正常，至此大功告成。
由于对react相关了解实在少，有啥说错的，欢迎指正～