<!-- CSS -->
<link vite-inline rel="stylesheet" href="index.css"/>

<!-- JavaScript -->
<script vite-inline type="module" src="index.js"></script>

<!-- TypeScript -->
<script vite-inline type="module" src="index.ts"></script>

Why?

Performance gains from bundling JS and CSS sources in HTML are extreme and visible to users immediately on page load.

This plugin should be used for code that applies custom theming, fonts, dark mode and CSS that curbs awkward flash of unstyled content before any network requests for CSS complete.

Alternative approaches

There are Vite plugins for inlining sources in HTML that focus on inlining all sources into a single file. Plugins that make HTML files without external dependencies are useful for embedded systems and mobile apps. Check out vite-plugin-singlefile for those use cases.

Install

pnpm i -D vite-plugin-html-inline-sources

Usage

vite.config.js

import {defineConfig} from 'vite'
import inlining from 'vite-plugin-html-inline-sources'

export default defineConfig(() => {
    return {
        plugins: [inlining()]
    }
})

index.html

<html lang="en">
<body>
    <script vite-inline src="index.ts"></script>
</body>
</html>

`vite-inline` behaviors

Without `type="module"` the script will be read from disk and inlined as-is.

JavaScript with `type="module"` will use `esbuild.build` and bundle all imports in the script output and the script tag will include the `type="module"` attribute.

TypeScript inlining will use `esbuild.build` to bundle the script and any of its imports.

don't forget type="module" if you use top-level-await or any other ESM module features

CSS will be inlined as-is with a read of the file from your project directory.

Currently, nothing is done for @import within your CSS. Imported CSS could be bundled during inlining by using lightningcss.

Keywords

FAQs

What is vite-plugin-html-inline-sources?

Is vite-plugin-html-inline-sources popular?

Is vite-plugin-html-inline-sources well maintained?

Package last updated on 31 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

vite-plugin-html-inline-sources