@nuxt/devtools/dist/client/_nuxt/analyze-build-i9b7jm9x.js

The Nuxt DevTools gives you insights and transparency about your Nuxt App.

import{b6 as Y,b7 as j,_ as P,r as S,E as R,aj as X,b8 as h,a6 as ee,a7 as ne,Z as te,a1 as le,i as ie,b9 as k,a8 as oe,Q as re,v as ue,q as se,M as ae}from"./kbaft34e.js";import{_ as de}from"./filepath-item.vue-iqnkpprc.js";import{p as U,q as V,k as F,J as u,a3 as i,S as e,U as x,F as p,ag as L,a5 as d,aa as v,u as y,a4 as a,ab as f,ac as D,ad as I,Z as E,V as B}from"./vendor/json-editor-vue-pb6xqf2y.js";import{_ as me}from"./ncode-block.vue-lge6rogf.js";import{_ as pe}from"./ncheckbox.vue-iynvr0dq.js";import{_ as ve}from"./help-fab.vue-fxai0oj2.js";import"./vendor/unocss-k776m6tm.js";import"./vendor/shiki-hjqm7vcp.js";import"./client-jlcyzfwz.js";const fe={"h-full":"",grid:"~ rows-[max-content_1fr]"},_e={flex:"~ wrap","w-full":""},ce=["onClick"],ye={key:0,flex:"~ col gap-4 items-center justify-center",p4:""},be={grid:"~ cols-[30px_1fr] gap-x-2 gap-y-3 items-center justify-center","w-100":""},xe="/__nuxt_devtools__/client",ge=U({__name:"BuildAnalyzeDetails",props:{current:{},prev:{}},setup(N){const _=N,w=`${Y().app.baseURL.replace(xe,"/")}/__nuxt_devtools__/analyze/`.replace(/\/+/g,"/"),c=V(()=>{const l=[{name:"Overview",id:"overview"}];return _.current.features.bundleClient&&l.push({name:"Client Bundle",id:"bundle-client"}),_.current.features.bundleNitro&&l.push({name:"Nitro Bundle",id:"bundle-nitro"}),_.current.features.viteInspect&&l.push({name:"Vite Inspect",id:"vite-inspect"}),l}),o=F(c.value[0]);function $(l){return`${((l.endTime-l.startTime)/1e3).toFixed(1)}s`}function m(l){return l<1024?`${l}B`:l<1024*1024?`${(l/1024).toFixed(1)}KB`:l<1024*1024*1024?`${(l/1024/1024).toFixed(1)}MB`:`${(l/1024/1024/1024).toFixed(1)}GB`}async function T(l){return S.clearAnalyzeBuilds(await R(),[l])}return(l,n)=>{const A=de,C=P;return i(),u("div",fe,[e("div",_e,[(i(!0),u(p,null,L(c.value,(r,t)=>(i(),u("button",{key:t,px4:"",py2:"",border:"r base",hover:"bg-active",class:E(r.id===o.value?.id?"":"border-b"),onClick:z=>o.value=r},[e("div",{class:E(r.id===o.value?.id?"":"op30")},v(r.name),3)],10,ce))),128)),n[1]||(n[1]=e("div",{border:"b base","flex-auto":""},null,-1))]),o.value?.id==="overview"?(i(),u("div",ye,[n[15]||(n[15]=e("div",{"flex-auto":""},null,-1)),e("div",be,[n[10]||(n[10]=e("div",{"i-carbon-commit":"","text-xl":""},null,-1)),e("div",null,[n[2]||(n[2]=e("div",{"text-sm":"",op50:""}," Name ",-1)),e("div",null,v(l.current.name),1)]),n[11]||(n[11]=e("div",{"i-carbon-time":"","text-xl":""},null,-1)),e("div",null,[n[3]||(n[3]=e("div",{"text-sm":"",op50:""}," Build duration ",-1)),e("div",null,v($(l.current)),1)]),l.current.size?.clientBundle?(i(),u(p,{key:0},[n[5]||(n[5]=e("div",{"i-carbon-cics-program":"","text-xl":""},null,-1)),e("div",null,[n[4]||(n[4]=e("div",{"text-sm":"",op50:""}," Client bundle size ",-1)),e("div",null,v(m(l.current.size.clientBundle)),1)])],64)):x("",!0),l.current.size?.nitroBundle?(i(),u(p,{key:1},[n[7]||(n[7]=e("div",{"i-carbon-bare-metal-server":"","text-xl":""},null,-1)),e("div",null,[n[6]||(n[6]=e("div",{"text-sm":"",op50:""}," Nitro bundle size ",-1)),e("div",null,v(m(l.current.size.nitroBundle)),1)])],64)):x("",!0),n[12]||(n[12]=e("div",{"i-carbon-edge-node":"","text-xl":""},null,-1)),e("div",null,[n[8]||(n[8]=e("div",{"text-sm":"",op50:""}," Built ",-1)),e("div",null,v(y(j)(new Date(l.current.endTime))),1)]),n[13]||(n[13]=e("div",{"i-carbon:folder-parent":"","text-xl":""},null,-1)),e("div",null,[n[9]||(n[9]=e("div",{"text-sm":"",op50:""}," Report Path ",-1)),d(A,{filepath:l.current.analyzeDir},null,8,["filepath"])])]),n[16]||(n[16]=e("div",{"flex-auto":""},null,-1)),d(C,{n:"rose",icon:"carbon-delete",onClick:n[0]||(n[0]=r=>T(l.current.name))},{default:a(()=>n[14]||(n[14]=[f(" Delete this report ")])),_:1,__:[14]})])):x("",!0),n._lazyshow1||o.value?.id==="bundle-client"?(n._lazyshow1=!0,i(),u(p,null,[D(e("iframe",{src:`${y(w)}${l.current.slug}/client.html`,"h-full":"","w-full":""},null,8,["src"]),[[I,o.value?.id==="bundle-client"]])],64)):x("v-show-if",!0),n._lazyshow2||o.value?.id==="bundle-nitro"?(n._lazyshow2=!0,i(),u(p,null,[D(e("iframe",{src:`${y(w)}${l.current.slug}/nitro.html`,"h-full":"","w-full":""},null,8,["src"]),[[I,o.value?.id==="bundle-nitro"]])],64)):x("v-show-if",!0),n._lazyshow3||o.value?.id==="vite-inspect"?(n._lazyshow3=!0,i(),u(p,null,[D(e("iframe",{src:`${y(w)}${l.current.slug}/.vite-inspect/`,"h-full":"","w-full":""},null,8,["src"]),[[I,o.value?.id==="vite-inspect"]])],64)):x("v-show-if",!0)])}}}),we={class:"markdown-body"},$e={__name:"analyze-build",setup(N,{expose:_}){return _({frontmatter:{}}),(w,c)=>(i(),u("div",we,c[0]||(c[0]=[e("h1",null,"Build Analyze",-1),e("p",null,[f("DevTools provides a build analyze tool to help you understand the size of your app in production. Whenever you start a new build, it runs the command "),e("code",null,"nuxt build --analyze"),f(" and present the output data directly in DevTools for easy browsing and comparing.")],-1)])))}},ze={flex:"~ col"},Be=["onClick"],Ce={flex:"~ gap-1 items-center wrap","w-full":"","text-sm":"",op60:""},ke={flex:"~ items-center justify-center wrap",p4:""},Ne={flex:"~ col gap-1","w-250":"",p4:""},Te={flex:"~ gap-3",mt2:"","justify-end":""},Re=U({__name:"analyze-build",setup(N){const _=X(),g=h(),w=ee(),c=ne("analyze-build:slug",""),o=V(()=>g.value?.builds.find(r=>r.slug===c.value)??g.value?.builds[0]),$=F(!1),m=F(""),T=V(()=>g.value?.builds.some(r=>r.name===m.value.trim()));async function l(){m.value=await S.generateAnalyzeBuildName(),await _.start()&&(ae("analyze-build:start"),k.value={name:m.value,processId:await S.startAnalyzeBuild(await R(),m.value)},$.value&&C())}const n=te();function A(r){return`${((r.endTime-r.startTime)/1e3).toFixed(1)}s`}function C(){k.value?.processId&&(n.value=k.value.processId,w.push("/modules/terminals"))}return le(()=>[{id:"action:analyze-build: start",title:"Start a new analyze build",icon:"i-carbon-edge-node",action:l}]),(r,t)=>{const z=P,G=ge,Z=ie,q=oe,M=ue,O=se,H=me,J=pe,K=re,Q=$e,W=ve;return i(),u(p,null,[d(q,{"left-size":30},{left:a(()=>[e("div",ze,[(i(!0),u(p,null,L(y(g)?.builds,s=>(i(),u(p,{key:s.slug},[e("button",{flex:"~ col gap1","hover:bg-active":"",p3:"",class:E(s.slug===o.value?.slug?"text-primary bg-active":""),onClick:b=>c.value=s.slug},[e("code",null,v(s.name),1),e("div",Ce,[t[4]||(t[4]=e("div",{"i-carbon-time":""},null,-1)),e("span",null,v(A(s)),1),t[5]||(t[5]=e("div",{"flex-auto":""},null,-1)),e("span",null,v(y(j)(new Date(s.endTime))),1)])],10,Be),t[6]||(t[6]=e("div",{"x-divider":""},null,-1))],64))),128)),e("div",ke,[y(k)?(i(),B(z,{key:1,n:"primary",icon:"carbon-circle-dash animate-spin",onClick:t[1]||(t[1]=s=>C())},{default:a(()=>t[8]||(t[8]=[f(" Building... ")])),_:1,__:[8]})):(i(),B(z,{key:0,n:"primary",icon:"carbon-edge-node",onClick:t[0]||(t[0]=s=>l())},{default:a(()=>t[7]||(t[7]=[f(" Start a new build ")])),_:1,__:[7]}))])])]),right:a(()=>[o.value?(i(),B(G,{key:0,current:o.value},null,8,["current"])):(i(),B(Z,{key:1}))]),_:1}),d(y(_),null,{default:a(({resolve:s})=>[d(K,{"model-value":!0,onClose:b=>s(!1)},{default:a(()=>[e("div",Ne,[t[13]||(t[13]=e("h3",{class:"text-lg font-medium leading-6",mb2:""}," Start analyze build? ",-1)),t[14]||(t[14]=e("p",{op50:""}," Enter the name of the build: ",-1)),d(M,{modelValue:m.value,"onUpdate:modelValue":t[2]||(t[2]=b=>m.value=b),placeholder:"Build name"},null,8,["modelValue"]),T.value?(i(),B(O,{key:0,"n-orange":""},{default:a(()=>t[9]||(t[9]=[f(" A build with the same name already exists, continue would overrides the previous build result. ")])),_:1,__:[9]})):x("",!0),t[15]||(t[15]=e("div",{my3:"","x-divider":""},null,-1)),t[16]||(t[16]=e("p",{op50:""}," The following command will be executed in your terminal: ",-1)),d(H,{code:`npx nuxi analyze --no-serve --name=${m.value}`,lang:"bash",px4:"",py2:"",border:"~ base rounded",lines:!1},null,8,["code"]),d(J,{modelValue:$.value,"onUpdate:modelValue":t[3]||(t[3]=b=>$.value=b),mt2:"",n:"primary"},{default:a(()=>t[10]||(t[10]=[f(" Navigate to terminal ")])),_:1,__:[10]},8,["modelValue"]),e("div",Te,[d(z,{onClick:b=>s(!1)},{default:a(()=>t[11]||(t[11]=[f(" Cancel ")])),_:2,__:[11]},1032,["onClick"]),d(z,{n:"solid primary",onClick:b=>s(!0)},{default:a(()=>t[12]||(t[12]=[f(" Start ")])),_:2,__:[12]},1032,["onClick"])])])]),_:2},1032,["onClose"])]),_:1}),d(W,null,{default:a(()=>[d(Q)]),_:1})],64)}}});export{Re as default};