webpack-json-access-optimizer

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

Features

• 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! ❤️

Example

Before

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"
}

After optimization ✨

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

🚀 Install

npm i -D webpack-json-access-optimizer

🚦 Quick setup

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
+     })
    ]
  }

JS loader

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'
        },
      ]
    },
  }

⚙️ Plugin API

accessorFunctionName

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.