Package Exports

vite-plugin-esi
vite-plugin-esi/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-plugin-esi) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vite-plugin-esi

Vite plugin to resolve ESI with nodesi.

Getting Started

Installation

npm i -D vite-plugin-esi

yarn add -D vite-plugin-esi

pnpm add -D vite-plugin-esi

Basic Usage

Use the required esi option to define ESI tags to be resolved. The keys of the object are the names of the html comments that will be replaced with the resolved ESI tags.

This plugin uses html comments to determine where the ESI tags (or resolved ESI tags) should be placed.

Comments must be in the following format:

<!--vite-plugin-esi name="somename" -->

// vite.config.ts
import { defineConfig } from 'vite'
import viteEsi from 'vite-plugin-esi'

export default defineConfig({
  plugins: [
    viteEsi({
        esi: {
            headFragments: [
                { src: "http://localhost:3000/esi/fragment1" },
                { src: "http://localhost:3000/esi/fragment2" }
            ]
        }
    })
  ]
})

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ESI Demo</title>
    <!--vite-plugin-esi name="headFragments" -->
</head>
<body>
    ....
</body>
</html>

Options

name	type	optional	default	description
esiOptions	`NodeEsiOptions \| undefined`	`true`	`n/a`	Passed to `nodesi`.
esi	`{ [name: string]: Tag[]; }`	`false`	`n/a`
resolveESI	`boolean \| undefined`	`true`	`true`	If ESI tags should be resolved to html, or to keep them as-is in the final html.

Examples

Keep ESI tags

If your production server is responsible for resolving ESI tags, you can set the resolveESI option to false to keep the tags as-is in the final html.

// vite.config.ts
import { defineConfig } from 'vite'
import viteEsi from 'vite-plugin-esi'

export default defineConfig({
  plugins: [
    viteEsi({
        resolveESI: false,
        esi: {
            headFragments: [
                { src: "http://localhost:3000/esi/fragment1" },
                { src: "http://localhost:3000/esi/fragment2" }
            ]
        }
    })
  ]
})

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ESI Demo</title>
    <!--vite-plugin-esi name="headFragments" -->
</head>
<body>
    ....
</body>
</html>

<!-- index.html (after build) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ESI Demo</title>
    <esi:include src="http://localhost:3000/esi/fragment1" onerror="abort"></esi:include>
    <esi:include src="http://localhost:3000/esi/fragment2" onerror="abort"></esi:include>
</head>
<body>
    ....
</body>
</html>