justjavac / json-perf-loader

A loader for webpack to load JSON with performance advice

json-perf-loader

A loader for webpack to load JSON with performance advice.

The cost of parsing JSON

See The cost of parsing JSON - V8

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:

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

json-perf-loader works like json-loader, but much faster.

index.js

import json from './file.json'

webpack.config.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

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

License

MIT

json-perf-loader's Issues

Is this still useful as of webpack v4?

Hi, just wanted to konw if this is still useful as of webpack v4.
In other words: is the default webpack loader inlining the JSON, or using this smart trick?

Thanks!

Produces invalid JSON when keys/values contain escaped double quotes

For example, consider the following JSON:

{ "this \"key\" is valid": "this \"value\" is valid" }

With limit: 0, this would result in the following JS:

module.exports = JSON.parse(`{"this \"key\" is valid":"this \"value\" is valid"}`)

However, trying to evaluate this JS results in a syntax error:

Uncaught SyntaxError: Unexpected token k in JSON at position 8
    at JSON.parse (<anonymous>)
    at <anonymous>:1:6

The error is correct. Since the quotes are only escaped once, they "appear" escaped to the template string but unescaped to the JSON parser, resulting in a syntax error.

Properly escaped it would look something like this:

module.exports = JSON.parse('{"this \\"key\\" is valid":"this \\"value\\" is valid"}')

I will open a pull request to fix this issue and add test cases.