Dynamically load scripts, components, css, and templates

Downloads in past


610.1.14 years ago5 years agoMinified + gzip package size for dynamic-import in KB


Build Status npm version
Dynamic Import
A library that allows you to dynamically load (and unload) scripts, CSS, and HTML templates and files in a browser.
Useful for preloading (in background), loading and unloading scripts inside the <head> of an html page, or cases when you may want to keep your css, js and templates in separate files and only want to import them into an HTML page at different times.


npm i dynamic-import

You can also use the dist files in the browser.
<script type="module" src="node_modules/dynamic-import/dist/import.min.js"></script>


Load CSS files

import { style } from 'node_modules/dynamic-import/dist/import.js';
const cssPaths = ['path/to/css/file.css', 'path/to/another/css/file.css'];
style.import(cssPaths).then(function () {
    // css files have been loaded!

Load JavaScript files

Load script files dynamically. When called, the supplied script will be loaded into the <head> of the DOM and run immediately.
import { script } from 'node_modules/dynamic-import/dist/import.js';
script.import('path/to/file.js').then(function () {
    // script has been loaded into the `<head>` of document!

Load HTML files

Load HTML file contents into an already-existing DOM element.
import { html } from 'node_modules/dynamic-import/dist/import.js';
html.import('path/to/html/file.html', document.body).then(function () {
    // html contents have been loaded into the body element