1.3.1 • Published 3 months ago
webpack-imported v1.3.1
webpack-imported
We'll get your asses imported in a right way.
📝 stats-webpack-plugin and 💩webpack-flush-chunks had a baby!
code splitting, prefetching, and resource management.
WebpackPlugin + ServerSide API + React Components(separate entrypoint)
Server side API
Webpack plugin
const {ImportedPlugin} = require('webpack-imported');
module.exports = {
plugins: [
new ImportedPlugin('imported.json')
]
};
This will output imported.json
as a one of the emitted assets, with all the information carefully sorted.
Stat.json
If you have only stat.json
generated somehow you can convert into into "imported" format
import {importStats} from "webpack-imported";
import stats from 'build/stats.json';
const importedStat = importStats(stats);
SSR API
importedAssets(stats, chunks, [tracker])
- return all assets associated with provided chunks. Could be provided atracker
to prevent duplications between runs.createImportedTracker()
- creates a duplication prevention tracker
import {importedAssets} from "webpack-imported";
import importedStat from "build/imported.json"; // this file has to be generated
const relatedAssets = importedAssets(importedStat, ['main']); // main is your "main" bundle
relatedAssets.scripts.load // list scripts to load
relatedAssets.scripts.preload // list scripts to preload
relatedAssets.styles.load // list styles to load
relatedAssets.styles.preload // list styles to preload
importedStat.config.publicPath // public path used at build time
with tracking
import {importedAssets, createImportedTracker} from "webpack-imported";
import importedStat from "build/imported.json"; // this file has to be generated
const tracker = createImportedTracker();
const relatedAssets1 = importedAssets(importedStat, ['main'], tracker);
// use scripts and styles
const relatedAssets2 = importedAssets(importedStat, ['home'], tracker);
// render only new scripts and styles
Client side API
React bindings (for SSR)
createImportedTracker()
- creates a duplication prevention trackerWebpackImportedProvider
- wires tracker down to React contextWebpackImport
- chunk importerprocessImportedStyles
- helper for critical styles.
import {createImportedTracker, WebpackImportedProvider, WebpackImport} from "webpack-imported/react";
import importedStat from "build/imported.json";
const tracker = createImportedTracker();// this is optional, only needed if your render is multipart(head/body)
<WebpackImportedProvider tracker={tracker}>
<WebpackImport stats={importedStat} chunks={['main']} />
</WebpackImportedProvider>
WebpackImport
has many props:
preload
=false - only preloads resources. If preload is set resources would be loaded via network, but not executed. Never use this option for the main chunk.anonymous
=false - should it be loaded as anonymousasync
=true - loads scripts withasync
attribute, usesdeferred
in other case.module
=false - loads scripts withmodule
attributecritical-styles
=false - enabled critical styles handling. No styles would be loaded or prefetched, but system will leave extra markup to preventMiniCssExtractPlugin
from adding them by itself. With this option enabled you have to callprocessImportedStyles
after the application starts to load the missing styles.
Related
Get stats from webpack
Handle chunks dependencies
React Lazy Loading
CSS Critical extraction
Licence
MIT