A webpack plugin for lazy loading JavaScript and CSS resources on user interaction
Triggy is a webpack plugin that loads the javascript and css files when user interaction happens like mouse move, scroll etc. It improves web page performance and boosts core web vitals.
src attributes to data-src and href to data-hrefnpm install -D triggy
Note: The plugin needs to be installed as a dev dependency because it is only used at the time of build.
Here is how to add the plguin to your webpack configuration-
const TriggyPlugin = require('triggy');
module.exports = {
// ... your webpack config
plugins: [
new TriggyPlugin()
]
};
const TriggyPlugin = require('triggy');
module.exports = {
plugins: [
new TriggyPlugin({
enabled: true, // Enable/disable the plugin
timeout: 15000, // Timeout in ms before automatic load static files (default: 10000)
include: [/\.html$/], // Files to process (default: HTML files)
exclude: [/admin\.html/], // Files to exclude
convertSrcToDataSrc: true, // Convert all the src attributes to data-src (default: true)
lazyLoadFiles: ['app.js', 'utils.js', 'styles.css'] // Only lazy load the mentioned files
})
]
};
Build Time: Triggy automatically-
<script src="..."> to <script data-src="..."><link href="..."> to <link data-href="...">Runtime: The injected script will-
| Option | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Enable or disable the plugin |
timeout | number | 10000 | Timeout in milliseconds before automatic load static resources |
include | RegExp[] | [/\.html$/] | File patterns to process |
exclude | RegExp[] | [] | File patterns to exclude |
convertSrcToDataSrc | boolean | true | Convert all the src/href attributes to data-src/data-href |
lazyLoadFiles | string[] | [] | Specific files to lazy load (if empty, all .js/.css files are lazy loaded) |
convertSrcToDataSrcSet convertSrcToDataSrc: false when:
src attributesdata-src attributes in HTMLnew TriggyPlugin({
convertSrcToDataSrc: false // Only inject script, don't convert attributes
})
Use lazyLoadFiles to specify which files should lazy load:
new TriggyPlugin({
lazyLoadFiles: ['app.js', 'utils.js', 'styles.css']
})
Behavior:
lazyLoadFiles - it will lazy load only those specified fileslazyLoadFiles - it will lazy load the .js and .css filesExample:
<script src="app.js"></script> <!-- ✅ Will be lazy loaded -->
<script src="utils.js"></script> <!-- ✅ Will be lazy loaded -->
<script src="critical.js"></script> <!-- ❌ Will load normally -->
<link href="styles.css"> <!-- ✅ Will be lazy loaded -->
<link href="bootstrap.css"> <!-- ❌ Will load normally -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="app.js"></script>
<script src="vendor.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" data-href="styles.css">
</head>
<body>
<script data-src="app.js"></script>
<script data-src="vendor.js"></script>
<script>
// Lazy loading script automatically injected here
</script>
</body>
</html>
// webpack.config.js (eject or use CRACO)
const TriggyPlugin = require('triggy');
module.exports = {
plugins: [
new TriggyPlugin({
timeout: 5000 // Load after 5 seconds
})
]
};
// vue.config.js
const TriggyPlugin = require('triggy');
module.exports = {
configureWebpack: {
plugins: [
new TriggyPlugin()
]
}
};
// next.config.js
const TriggyPlugin = require('triggy');
module.exports = {
webpack: (config) => {
config.plugins.push(new TriggyPlugin());
return config;
}
};
MIT
The plugin includes wide test coverage:
npm test # Run all tests
npm run test:watch # Run tests in watch mode
npm run test:coverage # Run tests with coverage report
npm run ci # Run full CI pipeline locally
This project uses GitHub Actions for continuous integration and deployment:
CI Pipeline - Runs on every push and PR
Release Pipeline - Runs on version tags (v*)
Contributions are welcome! Please feel free to submit a Pull Request.
See CONTRIBUTION.md for detailed contribution manual.
FAQs
A webpack plugin for lazy loading JavaScript and CSS resources on user interaction
We found that triggy demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.