# json-perf-loader

**Repository Path**: justjavac/json-perf-loader

## Basic Information

- **Project Name**: json-perf-loader
- **Description**: A loader for webpack to load JSON with performance advice
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-07-20
- **Last Updated**: 2022-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# json-perf-loader

![ci](https://github.com/justjavac/json-perf-loader/workflows/ci/badge.svg?branch=master)
[![cover][cover]][cover-url]
[![npm][npm]][npm-url]
[![download][download]][download-url]
[![deps][deps]][deps-url]

A loader for webpack to load JSON with performance advice.

## The cost of parsing JSON

See [The cost of parsing JSON - V8](https://v8.dev/blog/cost-of-javascript-2019#json)

> Because the JSON grammar is much simpler than JavaScript’s grammar, JSON can be parsed more efficiently than JavaScript.
> This knowledge can be applied to improve start-up performance for web apps that ship large JSON-like configuration object literals (such as inline Redux stores).
> Instead of inlining the data as a JavaScript object literal.
>
> As long as the JSON string is only evaluated once, the `JSON.parse` approach is much faster compared to the JavaScript object literal, especially for cold loads.
> A good rule of thumb is to apply this technique for objects of **10 kB or larger** — but as always with performance advice, measure the actual impact before making any changes.

## Getting Started

To begin, you'll need to install `json-perf-loader`:

```shell
$ npm install json-perf-loader --save-dev
```

`json-perf-loader` works like
[`json-loader`](https://github.com/justjavac/json-loader), but much faster.

**index.js**

```js
import json from './file.json'
```

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/i,
        type: 'javascript/auto',
        use: [
          {
            loader: 'json-perf-loader',
            options: {
              limit: 4096,
            },
          },
        ],
      },
    ],
  },
}
```

And run `webpack` via your preferred method.

**Note: `type: "javascript/auto"` is require**. See https://webpack.js.org/configuration/module/#ruletype

> `Rule.type` sets the type for a matching module.
> This prevents defaultRules and their default importing behaviors from occurring.
> For example, if you want to load a `.json` file through a custom loader, you'd need to set the `type` to `javascript/auto` to bypass webpack's built-in json importing.

## Options

### `limit`

Type: `Number|String`
Default: `1024 * 10`

The limit can be specified via loader options and defaults to `1024 * 10`. This is the recommended value for the V8 team.

#### `Number`

A `Number` specifying the maximum size of a file in bytes. If the file size is
**equal** or **greater** than the limit `JSON.parse` will be used.

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/i,
        type: 'javascript/auto',
        use: [
          {
            loader: 'json-perf-loader',
            options: {
              limit: 10,
            },
          },
        ],
      },
    ],
  },
}
```

## License

[MIT](./LICENSE)

[npm]: https://img.shields.io/npm/v/json-perf-loader.svg
[npm-url]: https://npmjs.com/package/json-perf-loader
[deps]: https://david-dm.org/justjavac/json-perf-loader.svg
[deps-url]: https://david-dm.org/justjavac/json-perf-loader
[download]: https://img.shields.io/npm/dm/json-perf-loader.svg?style=flat
[download-url]: https://npmcharts.com/compare/json-perf-loader?minimal=true
[tests]: https://dev.azure.com/justjavac/json-perf-loader/_apis/build/status/justjavac.json-perf-loader?branchName=master
[tests-url]: https://dev.azure.com/justjavac/json-perf-loader/_build/latest?definitionId=2&branchName=master
[cover]: https://codecov.io/gh/justjavac/json-perf-loader/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/justjavac/json-perf-loader