[{"data":1,"prerenderedAt":196},["ShallowReactive",2],{"term-c\u002Fcompression-streams-api":3,"related-c\u002Fcompression-streams-api":181},{"id":4,"title":5,"acronym":6,"body":7,"category":162,"description":163,"difficulty":164,"extension":165,"letter":166,"meta":167,"navigation":168,"path":169,"related":170,"seo":175,"sitemap":176,"stem":179,"subcategory":6,"__hash__":180},"terms\u002Fterms\u002Fc\u002Fcompression-streams-api.md","Compression Streams API",null,{"type":8,"value":9,"toc":156},"minimark",[10,15,19,23,26,30,145,149,152],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"The Compression Streams API lets the browser gzip or deflate data on the fly, right in JavaScript, without shipping a compression library over the wire just to compress things. Need to shrink a big blob before uploading it, or decompress a downloaded file? The browser can just do that natively now.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"The Compression Streams API provides native CompressionStream and DecompressionStream constructors for gzip and deflate compression directly in the browser, operating on ReadableStream and WritableStream pairs. It removes the need for JavaScript compression libraries for common use cases like compressing request bodies or decompressing downloaded archives.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const compressed = new Response(\n  file.stream().pipeThrough(new CompressionStream('gzip'))\n);\nconst blob = await compressed.blob();\n","javascript","",[38,39,40,67,110,119],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,64],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"spNyl","const",[41,50,52],{"class":51},"sTEyZ"," compressed ",[41,54,56],{"class":55},"sMK4o","=",[41,58,59],{"class":55}," new",[41,61,63],{"class":62},"s2Zo4"," Response",[41,65,66],{"class":51},"(\n",[41,68,70,73,76,79,82,84,87,90,93,96,98,101,105,107],{"class":43,"line":69},2,[41,71,72],{"class":51},"  file",[41,74,75],{"class":55},".",[41,77,78],{"class":62},"stream",[41,80,81],{"class":51},"()",[41,83,75],{"class":55},[41,85,86],{"class":62},"pipeThrough",[41,88,89],{"class":51},"(",[41,91,92],{"class":55},"new",[41,94,95],{"class":62}," CompressionStream",[41,97,89],{"class":51},[41,99,100],{"class":55},"'",[41,102,104],{"class":103},"sfazB","gzip",[41,106,100],{"class":55},[41,108,109],{"class":51},"))\n",[41,111,113,116],{"class":43,"line":112},3,[41,114,115],{"class":51},")",[41,117,118],{"class":55},";\n",[41,120,122,124,127,129,133,136,138,141,143],{"class":43,"line":121},4,[41,123,48],{"class":47},[41,125,126],{"class":51}," blob ",[41,128,56],{"class":55},[41,130,132],{"class":131},"s7zQu"," await",[41,134,135],{"class":51}," compressed",[41,137,75],{"class":55},[41,139,140],{"class":62},"blob",[41,142,81],{"class":51},[41,144,118],{"class":55},[11,146,148],{"id":147},"when-youll-hear-this","When You'll Hear This",[16,150,151],{},"\"We compress large form uploads with CompressionStream before sending them, no library needed.\" \u002F \"The Compression Streams API cut our client side bundle by removing a compression library as a dependency.\"",[153,154,155],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":69,"depth":69,"links":157},[158,159,160,161],{"id":13,"depth":69,"text":14},{"id":21,"depth":69,"text":22},{"id":28,"depth":69,"text":29},{"id":147,"depth":69,"text":148},"frontend","The Compression Streams API lets the browser gzip or deflate data on the fly, right in JavaScript, without shipping a compression library over the wire jus...","advanced","md","c",{},true,"\u002Fterms\u002Fc\u002Fcompression-streams-api",[171,172,173,174],"Web Worker","Fetch","Blob Storage","Bundle",{"title":5,"description":163},{"changefreq":177,"priority":178},"weekly",0.7,"terms\u002Fc\u002Fcompression-streams-api","yb_qIxJfUz8KEfnsFwIpXrzoW6sANELuYK5lkgbpCbo",[182,187,190,193],{"title":173,"path":183,"acronym":6,"category":184,"difficulty":185,"description":186},"\u002Fterms\u002Fb\u002Fblob-storage","cloud","beginner","Blob storage is just a fancy name for storing unstructured data — images, videos, PDFs, audio files, any binary stuff.",{"title":174,"path":188,"acronym":6,"category":162,"difficulty":185,"description":189},"\u002Fterms\u002Fb\u002Fbundle","Imagine your code is a pile of LEGO instructions split across 50 tiny papers.",{"title":172,"path":191,"acronym":6,"category":162,"difficulty":185,"description":192},"\u002Fterms\u002Ff\u002Ffetch","Fetch is the modern, built-in JavaScript way to make HTTP requests to APIs. You tell it a URL, it goes and gets the data, and you handle the response.",{"title":171,"path":194,"acronym":6,"category":162,"difficulty":164,"description":195},"\u002Fterms\u002Fw\u002Fweb-worker","JavaScript normally runs on one thread, which means heavy computation freezes your UI.",1792528073086]