insertStart() {
        const { async: isAsync, id } = this.attributes;
        this.styleRefs.forEach(uri => {
            this.stream.write(
                isAsync
                    ? `<script>${this
                          .pipeInstanceName}.loadCSS("${uri}")</script>`
                    : `<link rel="stylesheet" href="${uri}">`
            );
        });

        if (this.scriptRefs.length === 0) {
            this.stream.write(
                `<script data-pipe>${this.pipeInstanceName}.start(${this
                    .index})</script>`
            );
            this.index++;
            return;
        }

        const range = [this.index, this.index + this.scriptRefs.length - 1];
        const fragmentId = id || range[0];
        const attributes = Object.assign({}, this.pipeAttributes, {
            id: fragmentId,
            range
        });
        this.scriptRefs.forEach(uri => {
            this.stream.write(
                `<script data-pipe>${this.pipeInstanceName}.start(${this
                    .index}, "${uri}", ${JSON.stringify(attributes)})</script>`
            );
            this.index++;
        });
    }
Insert the placeholder for pipe assets and load the required JS and CSS assets at the start of fragment stream

- JS assets are loading via AMD(requirejs) for both sync and async fragments
- CSS for the async fragments are loaded using custom loadCSS(available in src/pipe.js)