npmpackage.info

Gathering detailed insights and metrics for vite-plugin-html-inline-sources

vite-plugin-html-inline-sources

Inlining CSS and JS to improve web performance

0.0.3

JavaScript

68.42 kB

586

Installations

npm install vite-plugin-html-inline-sources

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.12.0

NPM Version

10.9.0 Score

65.6

Supply Chain

83.4

Quality

85.2

Maintenance

Vulnerability

99.3

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

v0.0.3

Updated on Dec 31, 2024

v0.0.3-4

Updated on Dec 30, 2024

v0.0.3-3

Updated on Dec 17, 2024

v0.0.3-2

Updated on Dec 14, 2024

v0.0.3-1

Updated on Dec 14, 2024

v0.0.3-0

Updated on Dec 14, 2024

View All 8 releases

Contributors

Unable to fetch Contributors

View All 1 Contributors

Languages

JavaScript

JavaScript (100%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

eighty4

Download Statistics

Total Downloads

586

Last Day

Last Week

Last Month

Last Year

586

GitHub Statistics

21 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Feb 11, 2025

Bundle Size

223.25 kB

Minified

68.42 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.0.3

Package Id

vite-plugin-html-inline-sources@0.0.3

Unpacked Size

12.14 kB

Size

3.80 kB

File Count

NPM Version

10.9.0

Node Version

22.12.0

Published on

Dec 31, 2024

Total Downloads

Cumulative downloads

Total Downloads

586

Last Day

100%

Compared to previous day

Last Week

66.7%

Compared to previous week

Last Month

-92.5%

Compared to previous month

Last Year

586

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

esbuild magic-string parse5

Dev Dependencies

typescript vite

vite-plugin-html-inline-sources

A Vite plugin for inlining JS, CSS and SVG into index.html with a declarative vite-inline attribute.

1<!-- CSS -->
2<link vite-inline rel="stylesheet" href="index.css"/>
3
4<!-- JavaScript -->
5<script vite-inline type="module" src="index.js"></script>
6
7<!-- TypeScript -->
8<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

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

Usage

vite.config.js

1import {defineConfig} from 'vite'
2import inlining from 'vite-plugin-html-inline-sources'
3
4export default defineConfig(() => {
5    return {
6        plugins: [inlining()]
7    }
8})

index.html

1<html lang="en">
2<body>
3    <script vite-inline src="index.ts"></script>
4</body>
5</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.

No vulnerabilities found.

No security vulnerabilities found.

vite-plugin-html-inline-sources

Installations

Developer Guide

Yes

ESM

22.12.0

10.9.0

Score

Pull Requests

0

0

0

Issues

0

0

0

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

eighty4

Download Statistics

GitHub Statistics

Bundle Size

223.25 kB

68.42 kB

Maintainers

Package Meta Information

Total Downloads

586

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

vite-plugin-html-inline-sources

Why?

Alternative approaches

Install

Usage

vite.config.js

index.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

`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