@ bigcommerce/script-loader( 大商业/ 标语加载器 )

一个同步装入 JavaScript 文件的库 。 它在运行时通过向 DOM 中注入脚本标记来加载脚本文件.

安装

您可以使用 无。 。 。 .

npm install --save @bigcommerce/script-loader

使用量

脚本

要装入单个脚本 :

import { createScriptLoader } from '@bigcommerce/script-loader';

const loader = createScriptLoader();

loader.loadScript('https://cdn.foo.bar/main.js')
    .then(() => {
        console.log('Loaded!');
    });

要装入多个脚本 :

loader.loadScripts([
    'https://cdn.foo.bar/vendor.js',
    'https://cdn.foo.bar/main.js',
]);

装入脚本 async 属性 :

loader.loadScript('https://cdn.foo.bar/main.js', { async: true });

要预装或预选脚本 :

loader.preloadScript('https://cdn.foo.bar/chunk.js');
loader.preloadScript('https://cdn.foo.bar/another-chunk.js', { prefetch: true });

被预选的脚本是一个低优先级资源,因此当浏览器闲置时会在背景中下载. 另一方面,剧本没有 prefetch 选项将标记为高度优先资源并立即下载.

请注意预装或预装的脚本不会被执行. 它只会被下载到浏览器缓存中. 要将它附在文档上并执行,你需要拨打 loadScript 使用同样的 URL.

要预装或预选多个脚本 :

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 });

对于没有能力浏览器 preload 或者说 prefetch 资源,脚本将使用常规 Ajax 请求来加载.

样式表

装入单一样式表 :

import { createStylesheetLoader } from '@bigcommerce/script-loader';

const loader = createStylesheetLoader();

loader.loadStylesheet('https://cdn.foo.bar/main.css')
    .then(() => {
        console.log('Loaded!');
    });

要装入多个样式表 :

loader.loadStylesheet([
    'https://cdn.foo.bar/vendor.css',
    'https://cdn.foo.bar/main.css',
]);

要将样式表放在文档头, 而不是附加:

loader.loadStylesheet('https://cdn.foo.bar/main.css', { prepend: true });

要预装或预选样式表 :

loader.preloadStylesheet('https://cdn.foo.bar/chunk.css');
loader.preloadStylesheet('https://cdn.foo.bar/another-chunk.css', { prefetch: true });

类似于预加载脚本,预加载或预加载的样式表在被附加到文档上之前不会产生效果. 要做到这一点,你需要打电话 loadStylesheet 使用同样的 URL.

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 });

捐款

要释放:

npm run release

查看其它可用的命令 :

npm run

许可证

麻省理工学院