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瘦身呢？
请听下回分解。
