求助， React+gulp，即使是 helloworld 的打包体积也巨大

This topic created in 1605 days ago, the information mentioned may be changed or developed.

代码是最简单的 hello world ，typescript 写的，然后用 gulp 编译打包为 bundle.js 。

 class Main extends React.Component{ public render(){ return ( <div> <p>hello world</p> </div> ) } } ReactDOM.render( <Main></Main>, document.getElementById("root") );

打包后 bundle.js 的体积：

	没有 uglify	uglify
NODE_ENV=development	1100KB	398KB
NODE_ENV=production	--	132KB

打包后的 bundle.js ，即使在生产环境，配合 gulp-uglify 插件，仍然有 132KB 的体积。我观察到，react.production.min.js 的体积，只有 10KB 左右。react 的 runtime 还不到 1KB 。

那为什么 bundle.js 体积这么大呢？大家遇到过吗？

求助大家，我不知道该怎么查这个问题。我看到 webpack 好像有一个分析包体积的工具，gulp 没见到有。

5 replies 2021-12-23 16:19:06 +08:00

1

muzuiget

Dec 23, 2021

1

React 需要两个文件，react.js 和 react-dom.js ，两个 production.min.js ，前者 12K ，后者 118K 。你的 bundle.js 都打包进去了，很正常。

2

muzuiget

Dec 23, 2021

用 webpack 的配置对象 externals 属性排除即可

```
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
```

3

66beta

Dec 23, 2021

1

https://github.com/danvk/source-map-explorer

4

sillydaddy

OP

Dec 23, 2021

@muzuiget 我傻了，把 react-dom 给忘了。

5

sillydaddy

OP

Dec 23, 2021

@66beta
感谢感谢！我去试试。