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: about 1 year 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 4 years ago)
- Default Branch: develop
- Last Pushed: 2022-01-09T23:09:27.000Z (about 4 years ago)
- Last Synced: 2024-10-19T01:11:17.768Z (over 1 year 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/).