compiled/minified jsx file is bigger than original

Question

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.

Answer 1

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.

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