{"id":16347650,"url":"https://github.com/privatenumber/webpack-json-access-optimizer","last_synced_at":"2025-03-16T15:31:02.718Z","repository":{"id":45485852,"uuid":"411427166","full_name":"privatenumber/webpack-json-access-optimizer","owner":"privatenumber","description":"Webpack plugin to tree-shake and minify JSON modules","archived":false,"fork":false,"pushed_at":"2022-01-09T23:09:27.000Z","size":169,"stargazers_count":41,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-10-19T01:11:17.768Z","etag":null,"topics":["json","minify","optimize","plugin","treeshake","treeshaking","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/privatenumber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-28T20:20:04.000Z","updated_at":"2024-01-04T17:01:48.000Z","dependencies_parsed_at":"2022-07-18T23:47:01.130Z","dependency_job_id":null,"html_url":"https://github.com/privatenumber/webpack-json-access-optimizer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-json-access-optimizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-json-access-optimizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-json-access-optimizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/privatenumber%2Fwebpack-json-access-optimizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/privatenumber","download_url":"https://codeload.github.com/privatenumber/webpack-json-access-optimizer/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221665216,"owners_count":16860198,"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":["json","minify","optimize","plugin","treeshake","treeshaking","webpack"],"created_at":"2024-10-11T00:44:30.584Z","updated_at":"2024-10-27T10:49:23.479Z","avatar_url":"https://github.com/privatenumber.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-json-access-optimizer \u003ca href=\"https://npm.im/webpack-json-access-optimizer\"\u003e\u003cimg src=\"https://badgen.net/npm/v/webpack-json-access-optimizer\"\u003e\u003c/a\u003e \u003c!-- \u003ca href=\"https://npm.im/webpack-json-access-optimizer\"\u003e\u003cimg src=\"https://badgen.net/npm/dm/webpack-json-access-optimizer\"\u003e\u003c/a\u003e--\u003e \u003ca href=\"https://packagephobia.now.sh/result?p=webpack-json-access-optimizer\"\u003e\u003cimg src=\"https://packagephobia.now.sh/badge?p=webpack-json-access-optimizer\"\u003e\u003c/a\u003e\n\nOptimize JSON modules that are referenced via accessor function. For example, i18n locale JSONs.\n\n### Features\n- **Tree shaking** Remove unused JSON entries\n- **Optimize JSON structure** Minify JSON by converting to an array\n- **Developer friendly** Warn on invalid JSON keys and invalid accessor usage\n- **Persistent caching support** Designed to support Webpack 5 disk cache\n\n\u003csub\u003eSupport this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️\u003c/sub\u003e\n\n## Example\n### Before\nGiven a \"global accessor function\" `$t` that retruns values from `locale.json`:\n\n**index.js**\n```js\nconsole.log($t('helloWorld')) // logs \"Hello world!\"\n```\n\n**locale.json**\n```json\n{\n    \"helloWorld\": \"Hello world!\",\n    \"unusedString\": \"I'm never accessed\"\n}\n```\n\n### After optimization \u003csup\u003e✨\u003c/sup\u003e\n**index.js**\n```js\nconsole.log($t(0)) // logs \"Hello world!\"\n```\n\n**locale.json**\n```json\n[\"Hello world!\"]\n```\n\nNote:\n- The JSON is minified into an array, and the accessor now uses the array indices to access values\n- Unused entries are removed from the JSON\n\n## 🚀 Install\n```sh\nnpm i -D webpack-json-access-optimizer\n```\n\n## 🚦 Quick setup\n\nAssuming you have some sort of \"global accessor function\" that takes a JSON key and returns the JSON value (eg. via [`ProvidePlugin`](https://webpack.js.org/plugins/provide-plugin/)):\n\n1. Import the `JsonAccessOptimizer` plugin from `webpack-json-access-optimizer`.\n2. Register the plugin with the \"global accessor function\" name\n3. Add the `webpack-json-access-optimizer` loader to the JSON files. Note, all JSON files must have identical keys.\n\nIn `webpack.config.js`:\n\n```diff\n+ const { JsonAccessOptimizer } = require('webpack-json-access-optimizer')\n\n  module.exports = {\n    ...,\n\n    module: {\n      rules: [\n        ...,\n+       {\n+         test: /locale\\.json$/, // match JSON files to optimize\n+         loader: 'webpack-json-access-optimizer'\n+       },\n      ]\n    },\n\n    plugins: [\n      ...,\n+     new JsonAccessOptimizer({\n+       accessorFunctionName: '$t', // localization function name\n+     })\n    ]\n  }\n```\n\n### JS loader\nIf the JSON needs to be transformed to JavaScript via another loader, you can chain them:\n\nIn `webpack.config.js`:\n\n```diff\n  module.exports = {\n    ...,\n\n    module: {\n      rules: [\n        ...,\n        {\n          test: /locale\\.json$/, // match JSON files to optimize\n          use: [\n+           'some-other-json-transformer-loader', // any loader to transform JSON to JS\n            'webpack-json-access-optimizer'\n          ],\n+         type: 'javascript/auto'\n        },\n      ]\n    },\n  }\n```\n\n## ⚙️ Plugin API\n\n### accessorFunctionName\nType: `string`\n\nRequired\n\nThe name of the \"global accessor function\" that takes a JSON key and returns the JSON value. This function is typically provided via another plugin like [`ProvidePlugin`](https://webpack.js.org/plugins/provide-plugin/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fwebpack-json-access-optimizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprivatenumber%2Fwebpack-json-access-optimizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprivatenumber%2Fwebpack-json-access-optimizer/lists"}