Nano Loader

The Nano Loader is a dynamic script loader for browsers, allowing you to seamlessly load and use scripts from any URL on-the-fly. This enables you to efficiently access and integrate scripts from various sources.

Installation

npm install nano-loader --save

Usage

load

The load method retrieves a script from the specified URL, making it readily available for use within your code. This enables you to easily fetch and incorporate scripts from various sources.

import { load } from 'nano-loader'

await load('https://something.com/payment.js')

console.log(window.Something.payment()) // work!

once

The once method guarantees that a script is loaded just once, regardless of how often it is called. This feature is helpful for preventing unnecessary script loading and enhancing overall performance.

import { once, load } from 'nano-loader'

const loadPayment = once(() => load('https://something.com/payment.js'))

// Attempts to load the script 10000 times, but only loads it once.
await Promise.all([...Array(10000).keys()].map(() => loadPayment()))

console.log(window.Something.payment())

Examples

Use with Kakao Map + Vue

import { once, load } from 'nano-loader'

const KAKAO_KEY = process.env.KAKAO_KEY

const loadKakaoMapSdk = once(
  () => load(`//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_KEY}&libraries=services&autoload=false`)
    .then(() => new Promise((resolve) => window.kakao.maps.load(resolve)))
    .then(() => window.kakao.maps)
)

export default {
  mount() {
    const maps = await loadKakaoMapSdk()
    maps.Map(/* ... */)
  },
}