Skip to content

A loader for webpack to load JSON with performance advice

License

Notifications You must be signed in to change notification settings

justjavac/json-perf-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

850ebeb · Nov 19, 2024

History

73 Commits
Jul 25, 2022
Feb 19, 2021
Feb 25, 2021
Jul 15, 2019
Jul 12, 2019
Jul 12, 2019
Jul 12, 2019
Feb 25, 2021
Aug 23, 2022
Oct 11, 2022
Apr 12, 2022
Nov 19, 2024

Repository files navigation

json-perf-loader

ci cover npm download

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