Skip to content

📝stats-webpack-plugin and 💩webpack-flush-chunks had a baby!

License

Notifications You must be signed in to change notification settings

theKashey/webpack-imported

Repository files navigation

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 a tracker 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 tracker
  • WebpackImportedProvider - wires tracker down to React context
  • WebpackImport - chunk importer
  • processImportedStyles - 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 anonymous
  • [async=true] - loads scripts with async attribute, uses deferred in other case.
  • [module=false] - loads scripts with module attribute
  • [critical-styles=false] - enabled critical styles handling. No styles would be loaded or prefetched, but system will leave extra markup to prevent MiniCssExtractPlugin from adding them by itself. With this option enabled you have to call processImportedStyles 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

About

📝stats-webpack-plugin and 💩webpack-flush-chunks had a baby!

Resources

License

Stars

Watchers

Forks

Packages

No packages published