Skip to content

Commit d463f65

Browse files
committed
document bundler integration
1 parent 5db7d5c commit d463f65

File tree

1 file changed

+44
-3
lines changed

1 file changed

+44
-3
lines changed

README.md

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -434,17 +434,58 @@ const MyPage = () => (
434434
);
435435
```
436436

437-
## Webpack integration (experimental)
437+
## Bundler integration
438+
Keep in mind - you dont "need" this. It will just make integration slightly better in terms of prefetching (which affects network recourse priority) and thus startup time.
439+
440+
### Webpack integration
441+
You might preload/prefetch used styles and scripts, which were defined with `webpackChunkName`
438442

439443
```js
440444
// get mark somehow
441445
import {getMarkedChunks} from 'react-imported-component/server';
442446

443-
const chunkNames = getMarkedChunks(marks);
447+
const chunkNames = getMarkedChunks(marks);
448+
```
449+
450+
#### Via stat.json
451+
If you do have `stat.json` - you can discover __all__ resources you have to preload
452+
using [flush-webpack-chunks](https://github.com/faceyspacey/webpack-flush-chunks)
453+
```js
454+
const { js, styles } = flushChunks(webpackStats, {
455+
chunkNames,
456+
});
457+
458+
const prefetch = (targets, as) => (
459+
targets
460+
.map(url => `<link as="${as}" rel="preload" href="${url}" />`)
461+
.join('')
462+
);
463+
464+
res.send(prefetch(scripts, "script"));
465+
res.send(prefetch(stylesheets, "style"));
466+
```
467+
__DO NOT__ actually __load__ reported resources - only preload them, and let webpack do rest.
444468

445-
// use flush-webpack-chunks to discover assets behind chunk name
469+
#### Via assets.json
470+
You you are using [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin) then you have only list of assets, without dependencies between.
471+
That's enought.
472+
```js
473+
const prefetchChunks = (chunks, assets) => (
474+
chunks
475+
.map(chunk => [
476+
assets[chunk].js && `<link rel="preload" as="script" href="${assets[chunk].js}" />`,
477+
assets[chunk].css && `<link rel="preload" as="style" href="${assets[chunk].css}" />`,
478+
].join('')
479+
).join('')
480+
);
481+
482+
res.send(prefetchChunks(chunkNames, assets));
446483
```
447484

485+
### Parcel integration
486+
Use `parcel-manifest` and `getMarkedFileNames`(instead of `getMarkedChunks`) to find which files were required and has to be imported.
487+
488+
448489
## React-snap
449490
`react-imported-component` is the only (even) theoretically compatible loader for [react-snap](https://github.com/stereobooster/react-snap).
450491

0 commit comments

Comments
 (0)