# vite-entry-shaking-lazy-load

> vite-entry-shaking-lazy-load

Latest version **1.0.9** (published 2024-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-entry-shaking-lazy-load
pnpm add vite-entry-shaking-lazy-load
yarn add vite-entry-shaking-lazy-load
bun add vite-entry-shaking-lazy-load
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2024-11-18 |
| First published | 2023-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | ^14.18.0 \|\| >=16.0.0 |
| Dependencies | 2 |
| Unpacked size | 5.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | nguyenbatranvan |
| Keywords | Vite Plugin, Vite entry shaking, Vite lazy load |

## Links

- npm: https://www.npmjs.com/package/vite-entry-shaking-lazy-load
- Repository: https://github.com/nguyenbatranvan/vite-entry-shaking-lazyload
- Homepage: https://github.com/nguyenbatranvan/vite-entry-shaking-lazyload#readme
- Issues: https://github.com/nguyenbatranvan/vite-entry-shaking-lazyload/issues
- npm.io page: https://npm.io/package/vite-entry-shaking-lazy-load

## Dependencies (2)

- [magic-string](https://npm.io/package/magic-string.md) ^0.26.3
- [es-module-lexer](https://npm.io/package/es-module-lexer.md) ^1.0.3

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2024-11-18
- 1.0.8 — 2024-11-18
- 1.0.6 — 2023-03-29
- 1.0.4 — 2023-03-28
- 1.0.3 — 2023-03-28
- 1.0.2 — 2023-03-28
- 1.0.1 — 2023-03-28
- 1.0.0 — 2023-03-28

## README

<h1 align="center">vite-entry-shaking-lazy-load</h1>

<p align="center">
  Mimic tree-shaking behaviour when importing code from an entry file in development & serve mode.
</p>

> **Warning**
> This plugin is experimental, bugs might be expected and some edge cases might not be covered.

> **Note**
> The main execution logic of this plugin only applies to development mode because it addresses an issue which is
> specific to development mode.

## Features

- I have a files in ```src/charts/index.ts```

```ts
export {Chart1} from "./Chart1.tsx"
export {Chart2} from "./Chart2.tsx"
export {Chart3} from "./Chart3.tsx"
```

In `App.tsx`, i used `Chart1`

```ts
import {Chart1} from "./charts"

const App = () => {
    return <Chart1 / >
}
```

Although only using `Chart1`, but `Chart2` and `Chart3` are also loaded

**This plugin was written to solve that problem**

- Plugin support `lazy load` & `@loadable/components`
  **With lazy load react**

```ts
import {lazy} from "React";

const Chart1 = lazy(() => import("./charts").then(m => ({default: m.Chart1})))
const App = () => {
    return <Chart1 / >
}
```

**With @loadable/components**

```ts
const Chart1 = loadable(() => import("./components/chart"), {
    resolveComponent: cpn => cpn.Chart1
})
const App = () => {
    return <Chart1 / >
}
```

Work well

## Install

```bash
# Using npm
npm i -D vite-entry-shaking-lazy-load
# Using Yarn
yarn add -D vite-entry-shaking-lazy-load
# Using pnpm
pnpm add -D vite-entry-shaking-lazy-load
```

## Usage

Setup the plugin in your Vite configuration file.

```ts
import {resolve} from 'path';
import {defineConfig} from 'vite';
import EntryShakingPlugin from 'vite-entry-shaking-lazy-load';

const plugins = [
    EntryShakingPlugin({
        targets: [resolve(__dirname, 'src/charts')],
    })]

export default defineConfig(async () => ({
    plugins
}));
```

if your project uses alias import, you should run with alias resolve

````ts
import {resolve} from 'path';
import {defineConfig} from 'vite';
import EntryShakingPlugin from 'vite-entry-shaking-lazy-load';

const plugins = [
    EntryShakingPlugin({
        targets: [resolve(__dirname, 'src/charts')],
    })]

export default defineConfig(async () => ({
    resolve: {
        alias: [{
            // examples
            find: "@component", replacement: path.resolve(__dirname, "./src/components")
        }]
    },
    plugins
}));
````

---
_Source: https://npm.io/package/vite-entry-shaking-lazy-load · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._