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