其实这个问题我已经碰到好多次了，npm run build打包的项目体积很大，不利于部署。这篇文章以我的coursemate为例，记录一些打包优化流程。

1. Eject

npm run eject，这是基本的操作，目的是从create-react-app中抽离出webpack配置文件。这时，我的项目有5.83MB。

2. Disable JS Map

其实在config/webpack.config.js的配置下面，我们有一行代码：

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

我们可以在build简单粗暴地把这行改成false。 这样build下来，体积就优化到了1.51MB (1,586,872 bytes)

3. 使用CDN

这里我们首先修改webpack.config.js，在exports()中加入：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'antd': 'antd',
  'moment':'moment',
  'axios':'axios',
}

并在public/index.html中添加如下相应的CDN链接：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/antd@4.20.5/dist/antd.variable.min.css" />
<script crossorigin src="https://unpkg.com/antd@4.20.5/dist/antd.min.js"></script>
<script crossorigin src="https://unpkg.com/moment@2.29.3/min/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>

其中，去掉React后，体积变为了1.37 MB (1,446,157 bytes)，去掉antd（JS）后，体积变为了0.99 MB (1,039,143 bytes)，去掉moments后，体积为955 KB (978,808 bytes)， 去掉axios后，体积为883 KB (904,623 bytes)。

之后我发现，Antd的css好像没有去掉，于是手动从我的src中去掉了antd的css引入，之后大小变成了372 KB (381,002 bytes)，就已经优化了很多了。