Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The order of css <link> tags in index.html after SSR prerender is different from that in development #282

Open
7 tasks done
LyzSg opened this issue Jul 15, 2022 · 0 comments
Open
7 tasks done

The order of css <link> tags in index.html after SSR prerender is different from that in development #282

LyzSg opened this issue Jul 15, 2022 · 0 comments
Labels
feat: ssr has workaround

Comments

@LyzSg
Copy link

LyzSg commented Jul 15, 2022 •
edited
Loading

Describe the bug

My demo is based on vite ssr-vue example.

And I just imported a Vant Button in Home.vue , and added a custom className to it for rewriting it's style.

Run in dev mode (yarn dev), my custom css worked normally and intuitively. But in prod mode (yarn serve), the default css of the Vant Button was bundled in index.css, and my custom css was bundled in Home.css as the <!--preload-links--> which was injected before the index.css:

dist/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <!--preload-links-->
    <script type="module" crossorigin src="/test/assets/index.dbf829e0.js"></script>
    <link rel="stylesheet" href="/test/assets/index.0d210da7.css">
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    
  </body>
</html>

Because their selectors' weights are consistent, the original style of the component takes effect.

So in order to solve this problem, should I put the preload links behind the style generated by the build instead of before it?

Before:

// prerender.js
const html = template
      .replace(`<!--preload-links-->`, preloadLinks)
      .replace(`<!--app-html-->`, appHtml)

After?:

// prerender.js
const html = template
      .replace(`</head>`, `${preloadLinks}</head>`)
      .replace(`<!--app-html-->`, appHtml)

Will this destroy the performance improvement brought by preloading？

Or extract the CSS file from the preload links separately and put it in front of the end of head tag?

Wish for a recommended way. Thanks!!

Reproduction

https://github.com/LyzSg/vite-vue-ssr-demo

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 152.97 MB / 32.00 GB
    Shell: 4.2.46 - /bin/bash
Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.18 - /usr/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
npmPackages:
    @vitejs/plugin-vue: workspace:* => 3.0.0 
    @vitejs/plugin-vue-jsx: workspace:* => 2.0.0 
    vite: ^3.0.0 => 3.0.0

Used Package Manager

yarn

Logs

No response

Validations
@LyzSg LyzSg changed the title The order of css <link> tags after SSR prerender is difference from that in development The order of css <link> tags in index.html after SSR prerender is different from that in development Jul 15, 2022
@sapphi-red sapphi-red transferred this issue from vitejs/vite Oct 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feat: ssr has workaround
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@edison1105 @LyzSg @sapphi-red