React App 中如何分析Bundle Size？

source-map-explorer 利用 source maps 分析 bundles 的size，帮助我们理解是什么让我们的代码膨胀。

• 首先安装 Source map explorer 到你的 Create React App project 中，请按一下步骤

npm install --save source-map-explorer

或者你更中意用 yarn

yarn add source-map-explorer

• 然后在你的package.json中

"scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

如果你的React App是在Node express 项目中，可以以下尝试

"scripts": {
+   "analyze": "cd ./client && source-map-explorer build/static/js/main.*"
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

然后在production build 之后开始分析你的脚本

npm run build
npm run analyze

运行结果如下:

> cd ./client && source-map-explorer build/static/js/main.*

Unable to map 42 / 3531258 bytes (0.00%)

结果将会在你本地生成一个HTML文件，Chrome打开如下显示，

image.png

分析出来的结果太可怕，node_modules的size为3.38M, 占了整个 bundle 的
95.7%， 那么如何给Bundle瘦身呢？

请听下回分解。