|
|
import{_ as t,c as n,j as s,a as i,G as l,ag as p,B as o,o as d}from"./chunks/framework.C1C4sYC0.js";const v=JSON.parse('{"title":"MPA Mode","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mpa-mode.md","filePath":"en/guide/mpa-mode.md","lastUpdated":1719560776000}'),r={name:"guide/mpa-mode.md"},h={id:"mpa-mode",tabindex:"-1"};function k(c,e,E,g,m,u){const a=o("Badge");return d(),n("div",null,[s("h1",h,[e[0]||(e[0]=i("MPA Mode ")),l(a,{type:"warning",text:"experimental"}),e[1]||(e[1]=i()),e[2]||(e[2]=s("a",{class:"header-anchor",href:"#mpa-mode","aria-label":'Permalink to "MPA Mode <Badge type="warning" text="experimental" />"'},"",-1))]),e[3]||(e[3]=p(`<p>MPA (Multi-Page Application) mode can be enabled via the command line via <code>vitepress build --mpa</code>, or via config through the <code>mpa: true</code> option.</p><p>In MPA mode, all pages are rendered without any JavaScript included by default. As a result, the production site will likely have a better initial visit performance score from audit tools.</p><p>However, due to the absence of SPA navigation, cross-page links will lead to full page reloads. Post-load navigations in MPA mode will not feel as instant as in SPA mode.</p><p>Also note that no-JS-by-default means you are essentially using Vue purely as a server-side templating language. No event handlers will be attached in the browser, so there will be no interactivity. To load client-side JavaScript, you will need to use the special <code><script client></code> tag:</p><div class="language-html vp-adaptive-theme"><button title="Copy code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> client</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"># Hello</span></span></code></pre></div><p><code><script client></code> is a VitePress-only feature, not a Vue feature. It works in both <code>.md</code> and <code>.vue</code> files, but only in MPA mode. Client scripts in all theme components will be bundled together, while client script for a specific page will be split for that page only.</p><p>Note that <code><script client></code> is <strong>not evaluated as Vue component code</strong>: it's processed as a plain JavaScript module. For this reason, MPA mode should only be used if your site requires absolutely minimal client-side interactivity.</p>`,7))])}const b=t(r,[["render",k]]);export{v as __pageData,b as default};
|
