Introduction to Inline Source
Inline-source is a powerful technique and toolset allowing web developers to inline critical JavaScript and CSS directly into HTML files. This method improves the load time and overall performance by reducing the number of HTTP requests. Here, we explore the various APIs provided by the inline-source library with multiple examples to get you started.
API Examples
1. Basic Usage
Learn how to enhance your HTML files by inlining CSS and JS using inline-source.
const inlineSource = require('inline-source');
const html = `
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body></body>
</html>
`;
inlineSource(html, { rootpath: 'path/to/your/assets' }).then(html => {
console.log(html);
}).catch(err => {
console.error(err);
});
2. Inline Only Specific Tags
You can choose to inline only specific tags using the inline-source options.
const options = {
handlers: function(source, context) {
return source.fileContent.toString('utf-8');
},
rootpath: 'path/to/your/assets',
compress: true,
};
inlineSource(html, options).then(html => {
console.log(html);
}).catch(err => {
console.error(err);
});
3. Inlining with Different File Types
You can inline resources of different types such as images and fonts.
inlineSource(html, {
rootpath: 'path/to/your/assets',
types: ['img', 'svg', 'link[rel=stylesheet]', 'script'],
compress: true
}).then(html => {
console.log(html);
}).catch(err => {
console.error(err);
});
4. Conditional Inlining
Inline only when certain conditions are met.
const options = {
rootpath: 'path/to/your/assets',
attribute: 'data-inline',
ignore: ['png']
};
inlineSource(html, options).then(html => {
console.log(html);
}).catch(err => {
console.error(err);
});
Application Example
Below is an example of a web application using inline-source to inline its critical resources.
HTML File
<!DOCTYPE html>
<html>
<head>
<!-- inline -->
<link rel="stylesheet" href="styles.css" data-inline>
</head>
<body>
<h1>Hello, World!</h1>
<!-- inline -->
<script src="scripts.js"></script>
</body>
</html>
JavaScript Usage
const fs = require('fs');
const inlineSource = require('inline-source');
const html = fs.readFileSync('index.html', 'utf-8');
inlineSource(html, {
rootpath: __dirname,
compress: true
}).then(html => {
fs.writeFileSync('output.html', html);
console.log('Inlining complete!');
}).catch(err => {
console.error(err);
});
Hash: 14b8c701298f459c29c8affc3eab16fdc7850ce7f700fc8a6ed4223ec0f28e26
