WebPack体积优化

其实这个问题我已经碰到好多次了,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),就已经优化了很多了。