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

本文介绍了编译/缩小的jsx文件大于原始文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

The original jsx file size is 189k after removing all spaces. The compiled/minified file size js is 217k without any dependencies. I have used all webpack/babel optimization to minify code size except treeshaking. I am planning to shorten member variable/function name to reduce file size, because js-minify can only handle local variable names, e.g. replace react's createElement with shorter name. I just manually tried, file size is reduced by 9k after createElement removed. Not sure if there is any tool can help me do this.

推荐答案

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

There are a number of settings you can use in Webpack to get your output size smaller. Looks like you probably have that under control.

但是，捆绑包的大小将受您编写ES6代码和JSX的方式的影响.我整理了编写更精简的ES6代码的提示和技巧，范围从仔细选择ES6功能到优化JSX结构.希望对您有帮助

However, bundle size will be influenced by how you write your ES6 code and JSX. I compiled a list of tips and tricks for writing more minifiable ES6 code that range from careful selection of ES6 features to optimal JSX structures. I hope that helps