Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/privatenumber/webpack-json-access-optimizer

Webpack plugin to tree-shake and minify JSON modules
https://github.com/privatenumber/webpack-json-access-optimizer

json minify optimize plugin treeshake treeshaking webpack

Last synced: 2 months ago
JSON representation

Webpack plugin to tree-shake and minify JSON modules

Host: GitHub
URL: https://github.com/privatenumber/webpack-json-access-optimizer
Owner: privatenumber
License: mit
Created: 2021-09-28T20:20:04.000Z (over 3 years ago)
Default Branch: develop
Last Pushed: 2022-01-09T23:09:27.000Z (almost 3 years ago)
Last Synced: 2024-10-19T01:11:17.768Z (3 months ago)
Topics: json, minify, optimize, plugin, treeshake, treeshaking, webpack
Language: TypeScript
Homepage:
Size: 165 KB
Stars: 41
Watchers: 3
Forks: 1
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 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](https://github.com/privatenumber) 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**
```js
console.log($t('helloWorld')) // logs "Hello world!"
```

**locale.json**
```json
{
"helloWorld": "Hello world!",
"unusedString": "I'm never accessed"
}
```

### After optimization ^✨
**index.js**
```js
console.log($t(0)) // logs "Hello world!"
```

**locale.json**
```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
```sh
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`](https://webpack.js.org/plugins/provide-plugin/)):

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`:

```diff
+ 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`:

```diff
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`](https://webpack.js.org/plugins/provide-plugin/).