Inline Data

Convert resources to data URIs

• Install
• API
  • InlineData
    • See Also
    • InlineData
      • Options
      • Throws
    • .before
    • .sources
    • .after
• License

Install

yarn add makestatic-inline-data

API

InlineData

Inline references to assets (that exist in the site structure) using data: URIs.

Useful for those critical (above the fold) small assets that are better inlined into the content.

For each matched file find resources that match the rules assigned to the plugin and replace the resource URI with a data: URI containing the file content.

It can operate on resources in HTML and CSS files but you need to have configured the appropriate parsers and generated the resource graph. To illustrate the configuration below would inline all resources ending in logo.png in all HTML and CSS files in the site.

const parse = require('makestatic-preset-parse')
module.exports = {
  lifecycle: {
    parse: parse({js: false}),
    graph: require('makestatic-graph-resources'),
    transform: {
      plugin: require('makestatic-inline-data'),
      rules: [
        {
          test: /logo\.png$/
        }
      ]
    }
  }
}

See Also

• Graph Resources
• Data URIs
• Data URI Scheme

InlineData

new InlineData(context, options)

Create an InlineData plugin.

Enable this plugin for the transform phase.

For each matched file convert resources to inline data: URIs according to the assigned rules.

Rules are objects with the following fields:

• test: regular expression pattern compared against the resource URI.
• encode: boolean indicating whether to base64 encode the file content.

The test field is required and must be a valid regular expression. By default the encode flag is true and resources are base64 encoded however sometimes it may be more efficient (for svg images with gzip compression) to not base64 encode in which case set the encode field to false.

When the encode rule property is disabled the content is escaped using the encodeURIComponent function.

The mime type for referenced resources is resolved automatically.

• context Object the processing context.
• options Object the plugin options.

Options

• remove Boolean=false delete matched resources.
• rules Array list of resource matching rules.

Throws

• Error if no resource graph is available.

.before

InlineData.prototype.before()

Initialize the list of matched resources used in the after hook to delete matched resources when the remove option is set.

.sources

InlineData.prototype.sources(file, context)

Convert resources for each matched file.

• file Object the current file.
• context Object the processing context.

.after

InlineData.prototype.after(context)

Deletes matched resources from the compilation assets when the remove option has been enabled.

• context Object the procesing context.

License

MIT

Created by mkdoc on March 13, 2017