ci cover npm download

A loader for webpack to load JSON with performance advice.

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.

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.

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.

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,
 },
 },
 ],
 },
 ],
 },
}

MIT