Vite injects entry js to the head. Are there some particular reasons for that? is it better to inject it into the body? #3013

huajiejin · 2021-04-16T11:20:15Z

huajiejin
Apr 16, 2021

Hi, @yyx990803 , the speed of vite was impressive. But I got a little problem when I was trying to show a loading DOM in the index.html as soon as possible, the entry js was injected to the head by default, and I found that it's not configurable yet.

Source code is here:

vite/packages/vite/src/node/plugins/html.ts

Line 362 in 8c51bc0

result = injectToHead(result, assetTags)

After execute vite build, dist/index.html seems like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script type="module" crossorigin src="/assets/index.0f5d1ba9.js"></script>
    <link rel="stylesheet" href="/assets/index.2338dd34.css">
  </head>
  <body>
    <div id="app">
      <div>Loading........</div>
    </div>
  </body>
</html>

And what I expected was like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="/assets/index.2338dd34.css">
  </head>
  <body>
    <div id="app">
      <div>Loading........</div>
    </div>
    <script type="module" crossorigin src="/assets/index.0f5d1ba9.js"></script>
  </body>
</html>

If it's possible to use code below:

// inject chunk asset links
  if (chunk) {
    const assetTags = [
    // preload for imports
    ...getPreloadLinksForChunk(chunk),
    ...getCssTagsForChunk(chunk)
  ]

  result = injectToHead(result, assetTags)
  result = injectToBody(result, [
    // js entry chunk for this page
    {
      tag: 'script',
      attrs: {
        type: 'module',
        crossorigin: true,
        src: toPublicPath(chunk.fileName, config)
      }
    }
  ])
}

instead of:

// inject chunk asset links
  if (chunk) {
    const assetTags = [
    // js entry chunk for this page
    {
      tag: 'script',
      attrs: {
        type: 'module',
        crossorigin: true,
        src: toPublicPath(chunk.fileName, config)
      }
    },
    // preload for imports
    ...getPreloadLinksForChunk(chunk),
    ...getCssTagsForChunk(chunk)
  ]

  result = injectToHead(result, assetTags)
}

Answered by huajiejin

Apr 20, 2021

I found that a script element with type=module defer by default , so its position has no effect on the dom loading, however, the position of <link rel="stylesheet" href="/assets/index.2338dd34.css"> will.

View full answer

huajiejin · 2021-04-20T08:28:34Z

huajiejin
Apr 20, 2021
Author

I found that a script element with type=module defer by default , so its position has no effect on the dom loading, however, the position of <link rel="stylesheet" href="/assets/index.2338dd34.css"> will.

0 replies

swarty · 2022-05-26T13:14:09Z

swarty
May 26, 2022

I think, in better way it should be configurable, instead of use another plugins to fix this behave

0 replies

janreges · 2022-10-19T10:24:20Z

janreges
Oct 19, 2022

Vite is great, but it is true that it is necessary for the project to be configurable in which places the developers want which assets to be injected (in the head, or at the beginning or end of body, etc.).

If the loading/rendering speed is to be precisely optimized, it is necessary for the developers to be able to determine in their project where they want to inject what. Related to this is the work with the critical CSS that we want to have in the , but the rest can be inserted later.

We are starting to develop some of our projects in Astro, which uses Vite. The fact that it is not possible to determine where JS/CSS is injected, it is not possible to use some of super functionalities of libraries like a HTMX/Unpoly/HotWire. An example can be the fact that some of these libraries are not yet able to merge (in case of movement between pages), while interpreting CSS/JS in the replaced HTML content is without any problems.

0 replies

siim-m · 2023-01-11T23:53:32Z

siim-m
Jan 11, 2023

I have another interesting use case where it would be really handy if Vite did not change the location of the <script> tags at all.

I have a server-rendered Python web app that uses Jinja2 templates, most of which don't have <html>, <body> and <head> tags (they are partials that extend the base template).

I'm using Vite to bundle JS/CSS and to get hashes in asset file names for production. This almost works well, BUT whenever a file doesn't have a <head> tag, all <script type="module"> tags are moved to the very top of the file, which results in invalid HTML being served from the Python server (<script> comes before <html>). It doesn't break anything in practice as far as I can tell, but feels ugly and wrong.

My hacky workaround was to write a plugin that runs after Vite has done its bundling, looks at the manifest, and then goes and transforms the original HTML from scratch again, using regular expressions to find the <script> tags and replace them. Having looked at the Vite code base briefly, I feel like this could easily be done through a build option that gets passed to the HTML transformation plugin.

3 replies

caspii Feb 6, 2023

Same problem! Please share your hacky workaround, if you can

siim-m Feb 9, 2023

Ended up ditching the idea as it got too complex as soon as there was more than one <script type="module"> in any given file. Deciding where to put the bundled version was tricky when they are not immediately next to each other in the file.

For now, I ended up just removing type="module" there, so Vite won't touch it, and refactored the JS a bit.

caspii Feb 10, 2023

OK. Thanks for the reply. I'm now using the flask-assets package to bundle up everything in the Vite dist folder. I'm ignoring the HTML produced by Vite

maxfer03 · 2023-08-22T15:45:25Z

maxfer03
Aug 22, 2023

This worked for us:

import { defineConfig } from 'vite'
const jsToBottomNoModule = () => {
  return {
    name: "no-attribute",
    transformIndexHtml(html) {
      html = html.replace(`type="module" crossorigin`, "")
      let scriptTag = html.match(/<script[^>]*>(.*?)<\/script[^>]*>/)[0]
      console.log("\n SCRIPT TAG", scriptTag, "\n")
      html = html.replace(scriptTag, "")
      html = html.replace("<!-- # INSERT SCRIPT HERE -->", scriptTag)
      return html;
    }
  }
}

export default defineConfig({
  base: './',
  plugins: [jsToBottomNoModule()],
})

The plugin looks for the script tag in the built html, removes it and then pastes it where the "" is located (in this case it's in the html's body). Example of the dev html with the script comment:

<!doctype html>
<html lang="en">

<head>
...
</head>

<body>
  <div>
    ...
  </div>
  <!-- # INSERT SCRIPT HERE -->
  <script type="module" src="/main.js"></script>
    
</body>

</html>

Maybe not the cleanest solution, but it works!

2 replies

FabianoLothor Apr 30, 2025

Is there any plan to make this configurable?

I hate to add a comment-replacer in my file, also, it's insane that the CSS imports are appended after the JS imports.

FabianoLothor Apr 30, 2025

I made this version to remove unnecessary empty lines:

const htmlFixerPlugin = () => ({
  name: "html-fixer",
  transformIndexHtml(html) {
    let scriptTag = html.match(/\s+<script[^>]*>(.*?)<\/script[^>]*>/)[0]
    
    return html
      .replace(scriptTag, "")
      .replace("<!-- JS-SCRIPT-PLACEHOLDER -->", scriptTag.replace(`type="module" crossorigin`, `type="text/javascript"`).trim());
  }
})

html-file

...
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
...
  </div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <!-- JS-SCRIPT-PLACEHOLDER --><script type="module" src="./script.js"></script>
</body>

</html>

generated html-file

...
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
  <link rel="stylesheet" crossorigin href="../assets/app-BG6ZTqhV.css">
</head>

<body>
...
  </div>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="../assets/app-D2S1aP8k.js"></script>
</body>

</html>

christian100kodehode · 2025-07-05T00:33:09Z

christian100kodehode
Jul 5, 2025

I can not get it to run, i am supposed to put it inside the vite.config.js i think, but nothing happens, anyone help please ?

0 replies

This comment was marked as spam.

Sign in to view

Uh oh!

Vite injects entry js to the head. Are there some particular reasons for that? is it better to inject it into the body? #3013

Uh oh!

Uh oh!

Replies: 9 comments · 5 replies

Uh oh!

huajiejin Apr 20, 2021 Author

Uh oh!

This comment was marked as spam.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as spam.

This comment was marked as spam.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

html-file

generated html-file

Uh oh!

Replies: 9 comments 5 replies

huajiejin
Apr 20, 2021
Author