编译/缩小的 jsx 文件比原始文件大

Posted 2023-02-21

【中文标题】编译/缩小的 jsx 文件比原始文件大

【英文标题】：compiled/minified jsx file is bigger than original file

【发布时间】：2016-06-30 07:39:49

【问题描述】：

删除所有空格后，原始 jsx 文件大小为 189k。编译/缩小的文件大小 js 为 217k，没有任何依赖关系。我已经使用了所有的 webpack/babel 优化来缩小代码大小，除了 treeshaking。我打算缩短成员变量/函数名称以减小文件大小，因为 js-minify 只能处理局部变量名称，例如用较短的名称替换 react 的 createElement。我只是手动尝试，删除 createElement 后文件大小减少了 9k。不确定是否有任何工具可以帮助我做到这一点。

【问题讨论】：

我们同舟共济。我需要类似的东西。 createElement, createClass.. 应该有办法将这些 fn 引用放入变量并减小文件大小。

【参考方案1】：

您可以在 Webpack 中使用许多设置来减小输出大小。看起来你可能已经控制住了。

但是，包大小会受到您编写 ES6 代码和 JSX 的方式的影响。我编制了一份tips and tricks for writing more minifiable ES6 code 的列表，从精心挑选的 ES6 特性到优化的 JSX 结构，不一而足。希望对你有帮助