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

2021-12-23 13:32:30 +08:00
 sillydaddy

代码是最简单的 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 没见到有。

1825 次点击
所在节点    React
5 条回复
muzuiget
2021-12-23 14:07:12 +08:00
React 需要两个文件,react.js 和 react-dom.js ,两个 production.min.js ,前者 12K ,后者 118K 。你的 bundle.js 都打包进去了,很正常。
muzuiget
2021-12-23 14:08:56 +08:00
用 webpack 的配置对象 externals 属性排除即可

```
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
```
66beta
2021-12-23 14:13:28 +08:00
sillydaddy
2021-12-23 16:17:42 +08:00
@muzuiget 我傻了,把 react-dom 给忘了。
sillydaddy
2021-12-23 16:19:06 +08:00
@66beta
感谢感谢!我去试试。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/823971

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX