Natural Potato Magnet

    json-perf-loader

    1.1.0 • Public • Published

    json-perf-loader

    ci cover npm download deps

    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

    Install

    npm i json-perf-loader

    DownloadsWeekly Downloads

    2,571

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    8.27 kB

    Total Files

    6

    Last publish

    Collaborators

    • iamjjc