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.
compiled/minified jsx file is bigger than original file
475 Views Asked by poordeveloper At
1
There are 1 best solutions below
Related Questions in REACTJS
- What is `_dereq_()` inside React?
- React TypeError: React.renderComponent is not a function
- React - saving a component in the ref callback
- React Rails component: manually triggering a re-render
- React, ES6 - getInitialState was defined on a plain JavaScript class
- How to get multiple selected options value in React JS?
- React.render replace container instead of inserting into
- reactjs datagrid use html
- props is not initialized in react component
- How to display xml data using Reactjs
- hooking up the data model in ReactJS - syntax
- ReactJS: How to use an immutable empty array or object
- How to use Sinon.js FakeXMLHttpRequest with superagent?
- React select onChange is not working
- ReactJS - Tutorial Comment System > Threaded commenting
Related Questions in BUNDLE
- Call special fragment in Navigation Drawer Activity from separate Activity
- Errno::EACCES: Permission denied in create new app ruby on rails
- Creation of bundle products in a loop
- How can I setup the distribution build to get watchkit App working?
- Parceling objects in android to transfer from one activity to another
- How to use Stanza.io without browserify?
- Rails Bundle Update FetchError fail
- Installing refills gem gives error
- Send data from activity to viewpager fragment in Android
- Have trouble running the meteor's bundle
- How do I load url from Bundle in Android
- Change bundle content per user
- Configure FOSUserBundle Windows
- Access XML file in project bundle in Xcode 6.3.2
- Passing Number[] array through Intent
Related Questions in WEBPACK
- RequireJS shim config in webpack
- Webpack Uglify plugin returns "Killed" on Ubuntu
- Log to node console or debug during webpack build
- Gulp with WebPack. Which should be building my coffee/jade etc.?
- Webpack: silence output
- Webpack: Must i specify the domain in publicPath for url() directive to work in CSS?
- webpack-dev-server & jsxhint: const '$__0' has already been declared
- Use Webpack to split out a module so that it can be loaded in a WebWorker
- oclazyLoad with webpack to support lazy loading for Angularjs is not working on minification
- How to make webpack to produce only one file and include all chunks?
- Reduce transpiled code helpers with babel and webpack
- webpack sass compliation stuck, however same works with similar other file also same problamatic sass file works with gulp-sass module
- Webpack html-loader returns full module definition
- Webpack: Create a bundle with each file in directory
- Include paths for imports in babel using webpack
Related Questions in JSX
- React Native - Image Require Module using Dynamic Names
- React state not rendering
- React pass dynamic state to all routes in router
- return function to reactDOM does nothing
- Hiding/Obfuscating reactjs code of .jsx file type?
- Trailing forward slash in react-router routes
- React - User-Defined JSX Components Not rendering
- View display is not what I expect when using react-native
- ReactJS form onSubmit doesn't work, it's not called
- Stateless component: A valid React element (or null) must be returned
- ReactJS/ React-Router: How to filter nested array and objects based on url path parameters?
- React JSX: Access Props in Quotes in a Maped component list
- What is this JSX / JS notation?
- Link param doesn't render in JSX (react)
- JSX dismiss an arrow (>) in HTML
Related Questions in MINIFIEDJS
- minified JS causing ie 11 memory to grow by 1MB on page refresh
- what is the filename.js?m=1497883755 in script attachment src?
- using squishit and rendering external minifiedjs at the end of body element
- How to change angular-moment locale?
- TinyMCE MS MVC looking for non-minified file
- Minify calls to Math, Number, etc. with Terser
- Nextjs not minified (event in production)
- Update text content with minified.js
- What is purpose of statement like (function () { // code; }.call(this)); in JavaScript module?
- React app raises error when running from minified code, but not when running local from regular code
- minified javascript codes, I don't understand, can anyone explain it
- client host name being appended to client requests
- Is it okay to delete *.min.js.map while minifying the js files?
- webpack -p error: ERROR in bundle.js from UglifyJs
- How To Create Website With No HTML In Source Code
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
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