{"id":15916816,"url":"https://github.com/thekashey/jsx-compress-loader","last_synced_at":"2025-06-15T08:07:10.922Z","repository":{"id":57151490,"uuid":"152928172","full_name":"theKashey/jsx-compress-loader","owner":"theKashey","description":"⚛️JSX optimisation loader  to reduce size of React application","archived":false,"fork":false,"pushed_at":"2019-09-27T05:18:15.000Z","size":12,"stargazers_count":40,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-04T17:19:07.692Z","etag":null,"topics":["loader","react","size","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theKashey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-14T01:15:05.000Z","updated_at":"2020-09-15T15:29:52.000Z","dependencies_parsed_at":"2022-09-06T16:40:56.122Z","dependency_job_id":null,"html_url":"https://github.com/theKashey/jsx-compress-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/theKashey/jsx-compress-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fjsx-compress-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fjsx-compress-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fjsx-compress-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fjsx-compress-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theKashey","download_url":"https://codeload.github.com/theKashey/jsx-compress-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fjsx-compress-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259942786,"owners_count":22935329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader","react","size","webpack-loader"],"created_at":"2024-10-06T18:05:00.957Z","updated_at":"2025-06-15T08:07:10.880Z","avatar_url":"https://github.com/theKashey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jsx-compress-loader\n----\nJSX optimization webpack loader\n\n## What it does\n\nReplaces `React.createElement` by a local variable, thus __reduce__ \"number of characters\" per React Element\nfrom __17__ to __1__, as long local variable would be _uglified_.\n\n- \"a.b.createElement\".length === 17, \n- \"React.default.createElement\".length === 27. \n- usually - about 23 after all optimizations and transplications.\n- this solution - __1__\n\nThat is not a problem for Preact or Inferno, only to \"default\" React, as long only React has got \"long element creation\".\nSee [this tweet from Dan Abramov](https://twitter.com/dan_abramov/status/841266032576724992), to find more about it.\n\nThis technique also is almost NOT affecting gzipped size, only the _real_ amount of js code, browser has to parse.\n\n### Bonus \n\nThis also removes object property access (ie React.createElement), thus:\n- speeding up `Chrome` by 5%\n- speeding up `Safari 11` by 15%\n- speeding up `Safari 12` by 35%\n- not speeding up Mobile Safari 12(iPhone XS)\n- here is [the test](https://jsperf.com/single-dot-property-access/1)\n\n# Would it help?\nJust open your bundle, and count `createElement` inside. Or open any page, and count closing tags `\u003c/`.\nNext multiply by 22. Result is - amount of bytes you would remove from your bundle. For free.  \n\n## Usage\nJust add this webpack loader AFTER all other.\n- after ts\n- after js\n- after svg -\u003e react -\u003e babel -\u003e js\n- and dont forget to apply it to node_modules as well.\n\u003e in terms of webpack configuration - \"after\" goes \"before\", ie top-most loader is the \"last\" one.\n\n### Only for ESM modules!\nbabel \"modules\" should be \"false\" - you already should have it, for proper tree-shaking, and \nthis is what this library is counting on. \n\n### As separate loader\n```js\nrules: [\n  {\n    test: /\\.js$/, // for any js file in your project\n    use: 'jsx-compress-loader',\n  },\n  {\n    test: /\\.js$/,\n    exclude: /node_modules/,\n    use: 'babel-loader',    \n  },\n];\n``` \n\n### As chained loader\n```js\nrules: [\n  {\n    test: /\\.js$/, // paired with babel loader\n    exclude: /node_modules/,\n    use: [    \n      'jsx-compress-loader'\n      'babel-loader',\n    ],\n  },\n];\n```\n\n## Other ways\n\n- [babel-plugin-transform-react-inline-elements](https://babeljs.io/docs/en/next/babel-plugin-transform-react-inline-elements.html)\nwould inline \"createElement\", achieving almost the same result\n- [babel-plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)\nhas a `pragma jsx`, letting you to change JSX compilation rules. Preact, for example, configure it to produce just `h`.\n- [pragma jsx + webpack conf](https://medium.com/@jilizart/reduce-the-size-of-final-jsx-code-c39effca906f) - the same, but webpack plugin will inject right imports.\n- [babel-plugin-transform-react-constant-elements](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements)\nwould hoist Elements creating, thus removes _object property access_, as long it would be called\nonly once. Plus - would remove GC pressure due to the same \"one time\" element creation.\n- [react-local](https://github.com/philosaf/react-local) - is doing absolutely the same, but as a babel plugin. Requires more work for proper instalation.\n- [runtime-compress-loader](https://github.com/theKashey/runtime-compress-loader) - compress all inlined babel helpers. The same action, but for js sugar.\n\n# Licence\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Fjsx-compress-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthekashey%2Fjsx-compress-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Fjsx-compress-loader/lists"}