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
- ussd reader in Recket Native module
- Teams tab application returns SSO error in mobile Outlook
- Github Pages Deployment deploys a blank page
- Is there any way to glow this bulb image like a real light bulb
- Optimize LCP ReactJs
- Page in React only renders elements after refreshing
- Unable to Post Form Data to MongoDB because of picturepath
- MERN Stack App - User Avatar Upload - 500 Error After Deployment on Render
- Hooks are not supported inside an async component error in nextjs project using useQuery
- How to change the Font Weight of a SelectValue component in React when a SelectItem is selected?
- On the server side, it returns undefined but on the client side, logs the values no problem
- Multilevel dropdown with checkboxes in Select component
- TypeScript Error only on big type only when assigned to a variable
- Deployment through app engine, cloud sql database, problem connecting with server code, doesn't connect
- Data is not filtering in props. Showing passdata.map is not a function
Related Questions in BUNDLE
- Wix bundle of third party exe and new msi cant figure out detect conditions
- Testing for ODR image resources in main bundle
- bundle failed for css with direct child combinator
- bundle install in dockerfile
- How to invoke UAC(Elevation shield) Prompt while trying to open bootstrapper bundle exe in WIX
- Discount on optional products or product bundles in odoo v17
- Android Java Warning: get(String) in BaseBundle has been deprecated
- Manually created MacOS apps being deleted
- Check if product bundle has bundle-upsells ( optional items ) or simple bundled items
- Bundling Lit.js in Vite for production - RollupError: Could not resolve entry module "index.html"
- How can I create a script tag to render my Next.js application?
- Webpack 5 bundle doesn't exclude externals
- How to generate app bundles for publishing a Compose Multiplatform app for Android, iOS, Web, and Desktop?
- Logic behind how Next.js builds dynamic pages using the app router system?
- Android. Cannot parse json string from bundle
Related Questions in WEBPACK
- storybook 7 does not recognize module declarations
- webpack module federation "could not find react-redux context value; please ensure the component is wrapped in a <Provider"
- The webpack bundle created and stored in the project directory is different than the one used to run the application with webpack-dev-server
- Webpack Federated module's Production build fails with "Self-reference dependency has unused export name" when importing lodash
- Webpack outputting too many files
- Browserify Error: Uncaught TypeError: Unable to determine current node version in bundle.js
- Vanilla extract Next.js storybook: Can't resolve @vanilla-extract/css/recipe'
- Uncaught TypeError: _projects_js__WEBPACK_IMPORTED_MODULE_2__.default is undefined
- How to force angular while executing take files from /dist folder (now webpack takes them from it's memory)
- Vue3 cannot import `@cornerstone/tools` , with error `ICRPolySeg.wasm`
- Webpack Module Federation remote.js not updating (possibly cached)
- Adding Submodule Paths in a Vite React Library
- Webpack 5 - Error: Module parse failed: Unexpected character '@'
- Rollup : Uncaught TypeError: Cannot destructure property 'class' of 'object null' as it is null
- Can not find module "uiohook-napi" after installation .exe in electron forge
Related Questions in JSX
- On the server side, it returns undefined but on the client side, logs the values no problem
- Convert selected layers into smart objects via script in photoshop
- I want to edit a specific row in database
- The components are getting unmounted and mounted again if we use switch case, Why?
- Screen.width property return always the same value that is not the width of the screen
- HTML Link inside Javascript array in react
- Display Image in a Material-UI Dialog after clicking an IconButton of the ImageListItemBar
- React deploying as blank screen, in locally works fine
- How do I add a link to a page using TypeScript? I'm stuck on how to do it. I've tried one method, but it's not working
- how do I create code transformer for parsing customized extension like JSX?
- Unknown word (CssSyntaxError) in JSX File (react js)
- using useState inside a non react component - no error
- JSX breaks type inference with GraphQL TypedDocumentNode
- Limit the width of an element(Tailwind)
- Test suite failed to run: Jest Encountered an unexpected token
Related Questions in MINIFIEDJS
- How to use uploaded artifacts (source map) on sentry
- Minify calls to Math, Number, etc. with Terser
- React app raises error when running from minified code, but not when running local from regular code
- What is purpose of statement like (function () { // code; }.call(this)); in JavaScript module?
- minified javascript codes, I don't understand, can anyone explain it
- How to change angular-moment locale?
- Nextjs not minified (event in production)
- Postman - calling function in external JS file - 'x is not defined'
- How can I find iframe instance within minified JS files?
- How To Create Website With No HTML In Source Code
- TinyMCE MS MVC looking for non-minified file
- what is the filename.js?m=1497883755 in script attachment src?
- webpack -p error: ERROR in bundle.js from UglifyJs
- Can we edit minified javascript files directly in Visual Studio?
- What is the 'double-dot' [eg. 5..toFixed()] I see in minified js?
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 # Hahtags
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