react-asyncmodule-tool v1.1.0

react-asyncmodule-tool

react-asyncmodule related method.

Installation

npm install react-asyncmodule-tool

Es6 used.

import {
    createCollect,
    createAssets,
    getChunkAssets
} from 'react-asyncmodule-tool';

API

createCollect(options)

options的属性

const collect = createCollect({
    stats,
    chunkName: 'home'
});

collect.getScripts(); // 返回 chunk 所需的脚本，含 async
collect.getStyles(); // 返回 chunk 所需的样式
collect.getInlineStyles().then((data) => { // 返回内联的样式
    console.log(data);
});

runtimeName一般不需要配置，使用默认值即可，如果有修改，则需要传入对应的 runtimeChunk 的名称，有多个 runtimeChunk 则传入数组，具体说明详见webpack runtime。

createAssets(chunks, publicPath)

Serialized resource path based on the webpack's chunks

const assets = createAssets(stats);
// output
{
    a: {
        js: ['/public/a.js'],
        css: ['/public/a.css']
    },
    b: {
        js: ['/public/common.js', '/public/b.js'],
        css: ['/public/common.css', '/public/b.css']
    }
}

getChunkAssets(assets, chunkName)

Output chunkNames according to matchRoutes.

getChunkAssets({
   a: {
       js: ['/public/a.js'],
       css: ['/public/a.css']
   },
   b: {
       js: ['/public/common.js', '/public/b.js'],
       css: ['/public/common.css', '/public/b.css']
   }
}, 'a');

// output

{
   js: '<script type="text/javascript" src="/public/a.js"></script>',
   css: '<link href="/public/a.css" rel="stylesheet">'
}