Neighbour Problem Manager

    webpack-json-access-optimizer
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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.

    Install

    npm i webpack-json-access-optimizer

    DownloadsWeekly Downloads

    10

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    23.4 kB

    Total Files

    23

    Last publish

    Collaborators

    • hirokiosame