# webpack-imported

> You chunks importing buddy

Latest version **1.3.1** (published 2024-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-imported
pnpm add webpack-imported
yarn add webpack-imported
bun add webpack-imported
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2024-08-08 |
| First published | 2019-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 104.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | theKashey |
| Maintainers | kashey |
| Keywords | webpack, stat.json, chunks, codesplitting |

## Links

- npm: https://www.npmjs.com/package/webpack-imported
- Repository: https://github.com/theKashey/webpack-imported
- Homepage: https://github.com/theKashey/webpack-imported#readme
- Issues: https://github.com/theKashey/webpack-imported/issues
- npm.io page: https://npm.io/package/webpack-imported

## Dependencies (2)

- [kashe](https://npm.io/package/kashe.md) ^1.0.3
- [tslib](https://npm.io/package/tslib.md) ^2.0.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.3.1 (latest) — 2024-08-08
- 1.2.1 (beta) — 2021-04-13
- 1.3.0 — 2024-03-14
- 1.2.2 — 2021-04-13
- 1.2.0 — 2021-04-13
- 1.1.2 — 2020-12-23
- 1.1.1 — 2020-12-10
- 1.1.0 — 2020-11-23
- 1.0.0 — 2020-07-30
- 0.0.7 — 2020-07-19
- 0.0.6 — 2020-07-19
- 0.0.5 — 2020-07-19
- 0.0.4 — 2020-07-19
- 0.0.3 — 2019-10-28
- 0.0.2 — 2019-09-18
- … 1 more at https://npm.io/package/webpack-imported/versions

## README

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
```js
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
```js
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

```js
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
```js
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.
```js
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
- [stats-webpack-plugin](https://github.com/unindented/stats-webpack-plugin)
- [loadable components webpack plugin](https://github.com/smooth-code/loadable-components/tree/master/packages/webpack-plugin)

### Handle chunks dependencies
- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks)

### React Lazy Loading
- [react-imported-component](https://github.com/theKashey/react-imported-component)

### CSS Critical extraction
- [used-styles](https://github.com/theKashey/used-styles)

# Licence 
MIT

---
_Source: https://npm.io/package/webpack-imported · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._