Optimize JSON modules that are referenced via accessor function. For example, i18n locale JSONs.

• Tree shaking Remove unused JSON entries
• Optimize JSON structure Minify JSON by converting to an array
• Developer friendly Warn on invalid JSON keys and invalid accessor usage
• Persistent caching support Designed to support Webpack 5 disk cache

_{Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I'm working on! ❤️}

Given a "global accessor function" $t that retruns values from locale.json:

index.js

console.log($t('helloWorld')) // logs "Hello world!"

locale.json

{ "helloWorld": "Hello world!", "unusedString": "I'm never accessed" }

index.js

console.log($t(0)) // logs "Hello world!"

locale.json

["Hello world!"]

Note:

• The JSON is minified into an array, and the accessor now uses the array indices to access values
• Unused entries are removed from the JSON

npm i -D webpack-json-access-optimizer

Assuming you have some sort of "global accessor function" that takes a JSON key and returns the JSON value (eg. via ProvidePlugin):

1. Import the JsonAccessOptimizer plugin from webpack-json-access-optimizer.
2. Register the plugin with the "global accessor function" name
3. Add the webpack-json-access-optimizer loader to the JSON files. Note, all JSON files must have identical keys.

In webpack.config.js:

+ const { JsonAccessOptimizer } = require('webpack-json-access-optimizer') module.exports = { ..., module: { rules: [ ..., + { + test: /locale\.json$/, // match JSON files to optimize + loader: 'webpack-json-access-optimizer' + }, ] }, plugins: [ ..., + new JsonAccessOptimizer({ + accessorFunctionName: '$t', // localization function name + }) ] }

If the JSON needs to be transformed to JavaScript via another loader, you can chain them:

In webpack.config.js:

 module.exports = { ..., module: { rules: [ ..., { test: /locale\.json$/, // match JSON files to optimize use: [ + 'some-other-json-transformer-loader', // any loader to transform JSON to JS 'webpack-json-access-optimizer' ], + type: 'javascript/auto' }, ] }, }

Type: string

Required

The 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.