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.
npm install nano-loader --save
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())
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(/* ... */)
},
}