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

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.

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!