求助， React+gulp，即使是 helloworld 的打包体积也巨大
sillydaddy · 2021-12-23 13:32:30 +08:00 · 1825 次点击这是一个创建于 1051 天前的主题，其中的信息可能已经有所发展或是发生改变。
代码是最简单的 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 没见到有。
 |
1
muzuiget 2021-12-23 14:07:12 +08:00  1
React 需要两个文件，react.js 和 react-dom.js ，两个 production.min.js ，前者 12K ，后者 118K 。你的 bundle.js 都打包进去了，很正常。
|
|
2
muzuiget 2021-12-23 14:08:56 +08:00
用 webpack 的配置对象 externals 属性排除即可
``` externals: { 'react': 'React', 'react-dom': 'ReactDOM', }, ``` |
 |
3
66beta 2021-12-23 14:13:28 +08:00 1
|
 |
4
sillydaddy OP @muzuiget 我傻了，把 react-dom 给忘了。
|
|
5
sillydaddy OP @66beta
感谢感谢！我去试试。 |
Select Language