1(("undefined"==typeof window?self:window).webpackChunkdebugbear_gae=("undefined"==typeof window?self:window).webpackChunkdebugbear_gae||[]).push([[9932],{20424(e,t,n){"use strict";n.r(t),n.d(t,{MinifyHtmlTool:()=>c});var i=n(21908),r=n(87195),a=n(62140),s=n(74848);async function l(e){return await(0,a.Z)(e,{collapseWhitespace:!0,removeComments:!0,removeRedundantAttributes:!0,removeEmptyAttributes:!0,minifyCSS:e=>(0,i._)(e),minifyJS:!0})}const o=[{title:"What is HTML minification?",text:"HTML minification means removing unnecessary whitespace, comments, and redundant attributes from your markup. The output renders identically but with a smaller file size."},{title:"Why minify HTML code?",text:"Smaller HTML means faster page loads, especially for the initial document which blocks rendering. This can improve Core Web Vitals scores like Largest Contentful Paint."},{title:"Does minifying HTML affect how the page looks?",text:"No, minifying HTML only removes characters that don't affect rendering. The visual appearance and functionality of your page remain exactly the same, while the file size is reduced."},{title:"How does the HTML minifier work?",text:"This tool uses the [html-minifier-terser](https://github.com/terser/html-minifier-terser) open-source library, a tool that parses HTML and removes unnecessary characters. It collapses whitespace, removes comments, str
1ips redundant attributes, and can also minify inline CSS and JavaScript using [CSSO](https://github.com/css/csso) and [Terser](https://github.com/terser/terser) respectively."},{title:"How do I minify HTML in production?",text:"Use [html-minimizer-webpack-plugin](https://webpack.js.org/plugins/html-minimizer-webpack-plugin/) for Webpack, or enable HTML minification in your CMS. Most static site generators also have built-in options for this."}];function c(){return(0,s.jsx)(r.E,{title:"Online HTML Minifier: Compress HTML Code",description:"Paste your HTML code below and click 'Minify' to reduce its size.",inputLabel:"Input HTML",outputLabel:"Minified Output",ctaTitle:"Minify",breadcrumbTitle:"Minify HTML",breadcrumbHref:"/tool/minify-html",transform:l,faqItems:o,language:"html",sampleCode:'<!DOCTYPE html>\n<html>\n <head>\n <title>My Page</title>\n </head>\n <body>\n \x3c!-- Main content --\x3e\n <div class="container">\n <h1>Hello World</h1>\n <p>Welcome to my website.</p>\n </div>\n </body>\n</html>'})}},87195(e,t,n){"use strict";n.d(t,{E:()=>S}),n(25440),n(62953);var i=n(94430),r=n(52300),a=n(11178),s=n(41802),l=n(96540),o=n(45230),c=n(99827),u=n(25959),d=n(40256),m=n(15874),h=n(63427),f=n(6585),b=n(36898),p=n(74848);const y=b.EditorView.theme({"&":{fontSize:"14px",border:"1px solid #dee2e6",borderRadius:"0.375rem",height:"100%"},"&.cm-focused":{outline:"none",borderColor:"#86b7fe",boxShadow:"0 0 0 0.25rem rgba(13, 110, 253, 0.25)"},".cm-scroller":{fontFamily:"monospace",overflow:"auto"},".cm-content":{padding:"8px 0"},".cm-gutters":{backgroundColor:"#f8f9fa",borderRight:"1px solid #dee2e6",borderRadius:"0.375rem 0 0 0.375rem"}}),g=b.EditorView.theme({"&":{backgroundColor:"#f8f9fa"},".cm-content":{backgroundColor:"#f8f9fa"}});function x(e){switch(e){case"javascript":return(0,d.Q2)();case"html":return(0,u.html)();case"css":return(0,c.AH)()}}function v(e){let t=e.value,n=e.onChange,i=e.language,r=e.readOnly,a=void 0!==r&&r,s=e.height,c=void 0===s?"300px":s;const u=l.useRef(null),d=l.useRef(null);return l.useEffect(()=>{if(!u.current)return;const e=[(0,b.lineNumbers)(),b.EditorView.lineWrapping,(0,m.syntaxHighlighting)(m.defaultHighlightStyle,{fallback:!0}),x(i),(0,h.highlightSelectionMatches)(),(0,o.history)(),b.keymap.of([...o.defaultKeymap,...h.searchKeymap,...o.historyKeymap]),y];a?(e.push(f.EditorState.readOnly.of(!0)),e.push(g)):n&&e.push(b.EditorView.updateListener.of(e=>{e.docChanged&&n(e.state.doc.toString())}));const r=f.EditorState.create({doc:t,extensions:e}),s=new b.EditorView({state:r,parent:u.current});return d.current=s,()=>{s.destroy()}},[i,a]),l.useEffect(()=>{d.current&&t!==d.current.state.doc.toString()&&d.current.dispatch({changes:{from:0,to:d.current.state.doc.length,insert:t}})},[t]),(0,p.jsx)("div",{ref:u,style:{height:c}})}function w(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var i,r,a,s,l=[],o=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;o=!1}else for(;!(o=(i=a.call(n)).done)&&(l.push(i.value),l.length!==t);o=!0);}catch(e){c=!0,r=e}finally{try{if(!o&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw r}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return j(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?j(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=Array(t);n<t;n++)i[n]=e[n];return i}function S(e){let t=e.title,n=e.description,o=e.inputLabel,c=e.outputLabel,u=e.ctaTitle,d=e.breadcrumbTitle,m=e.breadcrumbHref,h=e.transform,f=e.faqItems,b=e.language,y=e.sampleCode;const g=w(l.useState(""),2),x=g[0],j=g[1],S=w(l.useState(""),2),T=S[0],C=S[1],H=w(l.useState(null),2),k=H[0],N=H[1],L=w(l.useState(!1),2),E=L[0],O=L[1],W=x.length>0&&T.length>0?Math.round(100*(1-T.length/x.length)):null;return(0,p.jsx)(a.K7,{isFullWidthWithoutSidebar:!0,header:(0,p.jsx)(i.V,{breadcrumbs:[{title:"Free Tools",href:"/tools"},{title:d,href:m}]}),children:(0,p.jsxs)("div",{className:"",children:[(0,p.jsx)("h1",{className:"mb-2",style:{fontWeight:500},children:t}),(0,p.jsx)("p",{className:"mb-4 color-coldGrey2",children:n}),(0,p.jsxs)("div",{className:"mb-3",children:[(0,p.jsxs)("div",{className:"d-flex justify-content-between align-items-center mb-1",children:[(0,p.jsx)("label",{className:"form-label fw-bold mb-0",children:o}),(0,p.jsxs)("button",{type:"button",className:"btn btn-link btn-sm p-0",onClick:async()=>{j(y),O(!0),N(null);try{const e=await h(y);C(e)}catch(e){N(e instanceof Error?e.message:"Transformation failed"),C("")}finally{O(!1)}},children:["Try sample ",o.replace("Input ","")]})]}),(0,p.jsx)(v,{value:x,onChange:j,language:b,height:"300px"})]}),(0,p.jsx)("button",{className:"btn btn-primary mb-3 btn-block btn-lg",onClick:async function(){if(!x.trim())return N("Please enter some code"),void C("");O(!0),N(null);try{const e=await h(x);C(e)}catch(e){N(e instanceof Error?e.message:"Transformation failed"),C("")}finally{O(!1)}},disabled:E,children:E?"Processing...":u}),k&&(0,p.jsx)("div",{className:"alert alert-danger mb-3",role:"alert",children:k}),T&&(0,p.jsxs)("div",{className:"mb-3",children:[(0,p.jsxs)("div",{className:"d-flex justify-content-between align-items-center",children:[(0,p.jsx)("label",{htmlFor:"code-output",className:"form-label fw-bold mb-0",children:c}),null!==W&&W>0&&(0,p.jsxs)("span",{children:[(0,s.z3)(x.length)," â ",(0,s.z3)(T.length)," | ",(0,p.jsxs)("strong",{children:["-",(0,s.z3)(x.length-T.length)," â ",W,"% smaller"]})]})]}),(0,p.jsx)("div",{className:"mt-1",children:(0,p.jsx)(v,{value:T,language:b,readOnly:!0,height:"400px"})})]}),f&&(0,p.jsx)(r.$,{items:f}),(0,p.jsx)(M,{currentPath:m})]})})}const T=[{href:"/tool/minify-js",title:"JavaScript Minifier"},{href:"/tool/minify-html",title:"HTML Minifier"},{href:"/tool/minify-css",title:"CSS Minifier"},{href:"/tool/minify-json",title:"JSON Minifier"},{href:"/tool/beautify-js",title:"JavaScript Beautifier"},{href:"/tool/beautify-html",title:"HTML Beautifier"},{href:"/tool/beautify-css",title:"CSS Beautifier"},{href:"/tool/beautify-json",title:"JSON Beautifier"}];function M(e){let t=e.currentPath;const n=T.filter(e=>e.href!==t);return(0,p.jsxs)("div",{className:"mt-5",children:[(0,p.jsx)("h2",{className:"h5 mb-3",children:"Try Our Other Code Formatting Tools"}),(0,p.jsx)("div",{className:"d-flex flex-wrap gap-2",children:n.map(e=>(0,p.jsx)("a",{href:e.href,className:"btn btn-link mr-2 mb-2",style:{border:"1px solid #eee"},children:e.title},e.href))})]})}},52300(e,t,n){"use strict";n.d(t,{$:()=>a});var i=n(29262),r=n(74848);function a(e){let t=e.items;return t&&0!==t.length?(0,r.jsx)("div",{className:"mt-5",style:{maxWidth:1e3},children:t.map((e,t)=>(0,r.jsxs)("div",{className:"mb-4",children:[(0,r.jsx)("h2",{className:"h5",children:e.title}),(0,r.jsx)(i.UP,{text:e.text})]},t))}):null}},21908(e,t,n){"use strict";n.d(t,{_:()=>r});var i=n(64420);function r(e){return(0,i.Zl)(e).css}},74361(){},88806(){},42814(){},38817(){},5384(){},54755(){},40589(){},26107(){},47494(){}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.