Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bigcommerce/script-loader-js
A library for loading JavaScript files asynchronously
https://github.com/bigcommerce/script-loader-js
javascript script-loader
Last synced: 3 days ago
JSON representation
A library for loading JavaScript files asynchronously
- Host: GitHub
- URL: https://github.com/bigcommerce/script-loader-js
- Owner: bigcommerce
- License: mit
- Created: 2017-12-21T23:27:10.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-09T17:49:35.000Z (2 months ago)
- Last Synced: 2024-10-02T08:47:52.844Z (about 1 month ago)
- Topics: javascript, script-loader
- Language: TypeScript
- Homepage:
- Size: 1.26 MB
- Stars: 18
- Watchers: 72
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @bigcommerce/script-loader
[](https://travis-ci.com/bigcommerce/script-loader-js)
A library for loading JavaScript files asynchronously. It loads script files by injecting script tags into DOM during runtime.
## Install
You can install this library using [npm](https://www.npmjs.com/get-npm).
```sh
npm install --save @bigcommerce/script-loader
```
## Usage
### For scripts
To load a single script:
```js
import { createScriptLoader } from '@bigcommerce/script-loader';
const loader = createScriptLoader();
loader.loadScript('https://cdn.foo.bar/main.js')
.then(() => {
console.log('Loaded!');
});
```
To load multiple scripts:
```js
loader.loadScripts([
'https://cdn.foo.bar/vendor.js',
'https://cdn.foo.bar/main.js',
]);
```
To load a script with `async` attribute:
```js
loader.loadScript('https://cdn.foo.bar/main.js', { async: true });
```
To preload or prefetch a script:
```js
loader.preloadScript('https://cdn.foo.bar/chunk.js');
loader.preloadScript('https://cdn.foo.bar/another-chunk.js', { prefetch: true });
```
A prefetched script is a low priority resource, therefore it will be downloaded in the background when the browser is idle. On the other hand, a script without `prefetch` option will be marked as a high priority resource and downloaded immediately.
Please note that the preloaded or prefetched script won't be executed. It will just be downloaded to the browser cache. To attach it to the document and execute it, you will need to call `loadScript` with the same URL.
To preload or prefetch multiple scripts:
```js
loader.preloadScripts([
'https://cdn.foo.bar/chunk.js',
'https://cdn.foo.bar/another-chunk.js',
]);
loader.preloadScripts([
'https://cdn.foo.bar/chunk.js',
'https://cdn.foo.bar/another-chunk.js',
], { prefetch: true });
```
For browsers that don't have the ability to `preload` or `prefetch` resources, scripts will be loaded using regular Ajax requests instead.
### For stylesheets
To load a single stylesheet:
```js
import { createStylesheetLoader } from '@bigcommerce/script-loader';
const loader = createStylesheetLoader();
loader.loadStylesheet('https://cdn.foo.bar/main.css')
.then(() => {
console.log('Loaded!');
});
```
To load multiple stylesheets:
```js
loader.loadStylesheet([
'https://cdn.foo.bar/vendor.css',
'https://cdn.foo.bar/main.css',
]);
```
To prepend, instead of append, a stylesheet to the head of a document:
```js
loader.loadStylesheet('https://cdn.foo.bar/main.css', { prepend: true });
```
To preload or prefetch a stylesheet:
```js
loader.preloadStylesheet('https://cdn.foo.bar/chunk.css');
loader.preloadStylesheet('https://cdn.foo.bar/another-chunk.css', { prefetch: true });
```
Similar to a preloaded script, a preloaded or prefetched stylesheet won't take an effect until it is attached to the document. To do it, you will need to call `loadStylesheet` with the same URL.
```js
loader.preloadStylesheets([
'https://cdn.foo.bar/chunk.css',
'https://cdn.foo.bar/another-chunk.css',
]);
loader.preloadStylesheets([
'https://cdn.foo.bar/chunk.css',
'https://cdn.foo.bar/another-chunk.css',
], { prefetch: true });
```
## Contribution
To release:
```sh
npm run release
```
To see other available commands:
```sh
npm run
```
## License
MIT