[{"data":1,"prerenderedAt":1051},["ShallowReactive",2],{"blog-\u002Fblog\u002Fwhat-is-tree-shaking":3,"blog-\u002Fblog\u002Fwhat-is-tree-shaking-surround":1010,"blog-related":1017},{"id":4,"title":5,"body":6,"date":996,"description":997,"extension":998,"meta":999,"minutes":289,"navigation":473,"path":1000,"seo":1001,"stem":1002,"subtitle":1003,"tags":1004,"__hash__":1009},"blog\u002Fblog\u002Fwhat-is-tree-shaking.md","What is Tree Shaking",{"type":7,"value":8,"toc":992},"minimark",[9,18,23,26,41,64,67,70,73,108,114,117,130,138,165,200,204,207,212,439,444,547,550,564,567,573,577,743,746,757,760,817,820,826,831,835,921,924,927,959,968,970,988],[10,11,12],"p",{},[13,14,17],"a",{"href":15,"target":16},"https:\u002F\u002Fdev.to\u002Fbboyakers\u002Fwhat-is-tree-shaking-1ojb","_blank","Dev.to Original Article",[19,20,22],"h2",{"id":21},"what-is-tree-shaking","What is Tree Shaking?",[10,24,25],{},"Tree shaking is a term used as a means to eliminate code that isn't in use, or dead-code, as we call it. You can also think of it like choosing 3-4 relevant quotes from a book to write an excellent paper. If you only need 3-4 relevant quotes, why use the entire book?",[10,27,28,29,35,36,40],{},"Whenever a ",[13,30,34],{"href":31,"rel":32},"https:\u002F\u002Fdev.to\u002Ftanhauhau\u002Fwhat-is-module-bundler-and-how-does-it-work-3gp2",[33],"nofollow","code bundler",", like webpack, builds our web application for production. It does tree shaking. Code bundlers like webpack do their best to remove ",[37,38,39],"strong",{},"dead code",", or unused code, to reduce the bundle size of your application when you prepare your code to be able to be used for production. Unfortunately, it can't catch everything, and that because we sometimes write code that isn't tree shaking friendly.",[10,42,43,44,46,47,54,55,59,60,63],{},"A way for us to help code bundlers with tree shaking, or eliminating ",[37,45,39],{},", in our web development projects is to only import necessary methods and components into our application. We do this by using JavaScript ",[13,48,51],{"href":49,"rel":50},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002FDestructuring_assignment",[33],[37,52,53],{},"destructuring"," syntax in our ",[56,57,58],"code",{},"import"," statements and properly ",[56,61,62],{},"export"," code as well. In Vuetify, this is done by default when you import and use it throughout your project.",[65,66],"hr",{},[10,68,69],{},"Let's dive into an example to find out more about tree shaking!",[10,71,72],{},"Starting off, in JavaScript we sometimes unintentionally import an entire framework and\u002For library into our application. Example below:",[74,75,80],"pre",{"className":76,"code":77,"language":78,"meta":79,"style":79},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import Vuex from  'vuex'\n","js","",[56,81,82],{"__ignoreMap":79},[83,84,87,90,94,97,101,105],"span",{"class":85,"line":86},"line",1,[83,88,58],{"class":89},"s7zQu",[83,91,93],{"class":92},"sTEyZ"," Vuex ",[83,95,96],{"class":89},"from",[83,98,100],{"class":99},"sMK4o","  '",[83,102,104],{"class":103},"sfazB","vuex",[83,106,107],{"class":99},"'\n",[10,109,110,111,113],{},"The problem with this import statement is that we import the entire library, ",[56,112,104],{},", when we don't need everything from it when programming.Because of that, we end up bringing a significant amount of unnecessary code, into our web application.",[10,115,116],{},"What are the problems with this?",[118,119,120,124,127],"ul",{},[121,122,123],"li",{},"It increases bundle size when we build and deploy our app.",[121,125,126],{},"In return, it will take longer to load. Longer load times make for a bad end user experience.",[121,128,129],{},"It helps us follow DRY (\"don't repeat yourself\" - write code only once if at all possible) coding principles when using the library of choice and the functions\u002Fmethods within it.",[10,131,132,133,137],{},"The question you should always ask when you import a module is \"",[134,135,136],"em",{},"What exactly do I need from here?","\" This allows you to better approach what to import. Example:",[74,139,141],{"className":76,"code":140,"language":78,"meta":79,"style":79},"import { mapState } from  'vuex'\n",[56,142,143],{"__ignoreMap":79},[83,144,145,147,150,153,156,159,161,163],{"class":85,"line":86},[83,146,58],{"class":89},[83,148,149],{"class":99}," {",[83,151,152],{"class":92}," mapState",[83,154,155],{"class":99}," }",[83,157,158],{"class":89}," from",[83,160,100],{"class":99},[83,162,104],{"class":103},[83,164,107],{"class":99},[10,166,167,168,173,174,178,179,184,185,190,191,196,197,199],{},"In this example we are solely importing the ",[13,169,172],{"href":170,"rel":171},"https:\u002F\u002Fvuex.vuejs.org\u002Fguide\u002Fstate.html#the-mapstate-helper",[33],"mapState"," helper from the ",[13,175,104],{"href":176,"rel":177},"https:\u002F\u002Fvuex.vuejs.org\u002F",[33]," library, which is used to help manage the data and how it flows for a vue.js application. To many people not comfortable with ",[13,180,183],{"href":181,"rel":182},"https:\u002F\u002Fgithub.com\u002Flukehoban\u002Fes6features",[33],"es6"," this is a different ",[13,186,189],{"href":187,"rel":188},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FSyntax",[33],"syntax"," from what you usually see starting out. We are using ES6 ",[13,192,195],{"href":193,"rel":194},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002FDestructuring_assignment#Object_destructuring",[33],"object destructuring"," to grab the ",[56,198,172],{}," helper from vuex. Instead of importing all of vuex and only using one small part of the library, we use this syntax to grab only what we need from the vuex library. This \"take what you only need\" mindset helps keep dead code out of your application.",[19,201,203],{"id":202},"making-your-code-tree-shaking-friendly","Making Your Code Tree Shaking Friendly",[10,205,206],{},"BOOM we magically now have a small calculator app. This is what it currently looks like:",[10,208,209],{},[37,210,211],{},"calculator.js",[74,213,215],{"className":76,"code":214,"language":78,"meta":79,"style":79},"\u002F\u002Fcreating an object that holds functions to caclulate the numbers we input\nconst  myCalculator=  {\n    add(a, b) {\n        return a + b;\n    },\n    \n    subtract(a, b) {\n        return a - b;\n    },\n    \n    divide(a, b) {\n        return a \u002F b;\n    },\n    \n    multiply(a, b) {\n        return a * b;\n    }\n};\n\u002F\u002FMaking it possible for other files to import and use the calculator object\nexport  default  myCalculator;\n",[56,216,217,223,239,264,281,287,293,311,325,330,335,353,367,372,377,395,409,415,421,427],{"__ignoreMap":79},[83,218,219],{"class":85,"line":86},[83,220,222],{"class":221},"sHwdD","\u002F\u002Fcreating an object that holds functions to caclulate the numbers we input\n",[83,224,226,230,233,236],{"class":85,"line":225},2,[83,227,229],{"class":228},"spNyl","const",[83,231,232],{"class":92},"  myCalculator",[83,234,235],{"class":99},"=",[83,237,238],{"class":99},"  {\n",[83,240,242,246,249,252,255,258,261],{"class":85,"line":241},3,[83,243,245],{"class":244},"swJcz","    add",[83,247,248],{"class":99},"(",[83,250,13],{"class":251},"sHdIc",[83,253,254],{"class":99},",",[83,256,257],{"class":251}," b",[83,259,260],{"class":99},")",[83,262,263],{"class":99}," {\n",[83,265,267,270,273,276,278],{"class":85,"line":266},4,[83,268,269],{"class":89},"        return",[83,271,272],{"class":92}," a",[83,274,275],{"class":99}," +",[83,277,257],{"class":92},[83,279,280],{"class":99},";\n",[83,282,284],{"class":85,"line":283},5,[83,285,286],{"class":99},"    },\n",[83,288,290],{"class":85,"line":289},6,[83,291,292],{"class":92},"    \n",[83,294,296,299,301,303,305,307,309],{"class":85,"line":295},7,[83,297,298],{"class":244},"    subtract",[83,300,248],{"class":99},[83,302,13],{"class":251},[83,304,254],{"class":99},[83,306,257],{"class":251},[83,308,260],{"class":99},[83,310,263],{"class":99},[83,312,314,316,318,321,323],{"class":85,"line":313},8,[83,315,269],{"class":89},[83,317,272],{"class":92},[83,319,320],{"class":99}," -",[83,322,257],{"class":92},[83,324,280],{"class":99},[83,326,328],{"class":85,"line":327},9,[83,329,286],{"class":99},[83,331,333],{"class":85,"line":332},10,[83,334,292],{"class":92},[83,336,338,341,343,345,347,349,351],{"class":85,"line":337},11,[83,339,340],{"class":244},"    divide",[83,342,248],{"class":99},[83,344,13],{"class":251},[83,346,254],{"class":99},[83,348,257],{"class":251},[83,350,260],{"class":99},[83,352,263],{"class":99},[83,354,356,358,360,363,365],{"class":85,"line":355},12,[83,357,269],{"class":89},[83,359,272],{"class":92},[83,361,362],{"class":99}," \u002F",[83,364,257],{"class":92},[83,366,280],{"class":99},[83,368,370],{"class":85,"line":369},13,[83,371,286],{"class":99},[83,373,375],{"class":85,"line":374},14,[83,376,292],{"class":92},[83,378,380,383,385,387,389,391,393],{"class":85,"line":379},15,[83,381,382],{"class":244},"    multiply",[83,384,248],{"class":99},[83,386,13],{"class":251},[83,388,254],{"class":99},[83,390,257],{"class":251},[83,392,260],{"class":99},[83,394,263],{"class":99},[83,396,398,400,402,405,407],{"class":85,"line":397},16,[83,399,269],{"class":89},[83,401,272],{"class":92},[83,403,404],{"class":99}," *",[83,406,257],{"class":92},[83,408,280],{"class":99},[83,410,412],{"class":85,"line":411},17,[83,413,414],{"class":99},"    }\n",[83,416,418],{"class":85,"line":417},18,[83,419,420],{"class":99},"};\n",[83,422,424],{"class":85,"line":423},19,[83,425,426],{"class":221},"\u002F\u002FMaking it possible for other files to import and use the calculator object\n",[83,428,430,432,435,437],{"class":85,"line":429},20,[83,431,62],{"class":89},[83,433,434],{"class":89},"  default",[83,436,232],{"class":92},[83,438,280],{"class":99},[10,440,441],{},[37,442,443],{},"index.js",[74,445,447],{"className":76,"code":446,"language":78,"meta":79,"style":79},"import myCalculator from \".\u002Fcalculator.js\";\n\nconsole.log(myCalculator.add(1,  2)); \u002F\u002F Expected output: 3\nconsole.log(myCalculator.subtract(15,  9)); \u002F\u002F Expeted output: 6\n",[56,448,449,469,475,515],{"__ignoreMap":79},[83,450,451,453,456,458,461,464,467],{"class":85,"line":86},[83,452,58],{"class":89},[83,454,455],{"class":92}," myCalculator ",[83,457,96],{"class":89},[83,459,460],{"class":99}," \"",[83,462,463],{"class":103},".\u002Fcalculator.js",[83,465,466],{"class":99},"\"",[83,468,280],{"class":99},[83,470,471],{"class":85,"line":225},[83,472,474],{"emptyLinePlaceholder":473},true,"\n",[83,476,477,480,483,487,490,492,495,497,501,503,506,509,512],{"class":85,"line":241},[83,478,479],{"class":92},"console",[83,481,482],{"class":99},".",[83,484,486],{"class":485},"s2Zo4","log",[83,488,489],{"class":92},"(myCalculator",[83,491,482],{"class":99},[83,493,494],{"class":485},"add",[83,496,248],{"class":92},[83,498,500],{"class":499},"sbssI","1",[83,502,254],{"class":99},[83,504,505],{"class":499},"  2",[83,507,508],{"class":92},"))",[83,510,511],{"class":99},";",[83,513,514],{"class":221}," \u002F\u002F Expected output: 3\n",[83,516,517,519,521,523,525,527,530,532,535,537,540,542,544],{"class":85,"line":266},[83,518,479],{"class":92},[83,520,482],{"class":99},[83,522,486],{"class":485},[83,524,489],{"class":92},[83,526,482],{"class":99},[83,528,529],{"class":485},"subtract",[83,531,248],{"class":92},[83,533,534],{"class":499},"15",[83,536,254],{"class":99},[83,538,539],{"class":499},"  9",[83,541,508],{"class":92},[83,543,511],{"class":99},[83,545,546],{"class":221}," \u002F\u002F Expeted output: 6\n",[10,548,549],{},"This looks great, right? Well unfortunately there are a couple problems:",[118,551,552,561],{},[121,553,554,555,558,559,482],{},"First, even if we use just one method on the ",[56,556,557],{},"myCalculator"," object we will still import everything else inside ",[56,560,557],{},[121,562,563],{},"Second, due to that when we use a code bundler, like webpack, to bundle it for production, our bundle size will remain the same.",[10,565,566],{},"How do we refactor this to make it tree shaking friendly for our code bundlers?",[10,568,569,570,572],{},"We're going to split each of our methods inside ",[56,571,557],{}," into their own modules!",[10,574,575],{},[37,576,211],{},[74,578,580],{"className":76,"code":579,"language":78,"meta":79,"style":79},"export function add(a,b){\n    return a + b;\n}\n\nexport function subtract(a, b){\n    return a - b;\n}\n\nexport function divide(a, b) {\n    return a \u002F b;\n}\n\nexport function multiply(a, b) {\n    return a * b;\n}\n",[56,581,582,604,617,622,626,645,657,661,665,686,698,702,706,727,739],{"__ignoreMap":79},[83,583,584,586,589,592,594,596,598,601],{"class":85,"line":86},[83,585,62],{"class":89},[83,587,588],{"class":228}," function",[83,590,591],{"class":485}," add",[83,593,248],{"class":99},[83,595,13],{"class":251},[83,597,254],{"class":99},[83,599,600],{"class":251},"b",[83,602,603],{"class":99},"){\n",[83,605,606,609,611,613,615],{"class":85,"line":225},[83,607,608],{"class":89},"    return",[83,610,272],{"class":92},[83,612,275],{"class":99},[83,614,257],{"class":92},[83,616,280],{"class":99},[83,618,619],{"class":85,"line":241},[83,620,621],{"class":99},"}\n",[83,623,624],{"class":85,"line":266},[83,625,474],{"emptyLinePlaceholder":473},[83,627,628,630,632,635,637,639,641,643],{"class":85,"line":283},[83,629,62],{"class":89},[83,631,588],{"class":228},[83,633,634],{"class":485}," subtract",[83,636,248],{"class":99},[83,638,13],{"class":251},[83,640,254],{"class":99},[83,642,257],{"class":251},[83,644,603],{"class":99},[83,646,647,649,651,653,655],{"class":85,"line":289},[83,648,608],{"class":89},[83,650,272],{"class":92},[83,652,320],{"class":99},[83,654,257],{"class":92},[83,656,280],{"class":99},[83,658,659],{"class":85,"line":295},[83,660,621],{"class":99},[83,662,663],{"class":85,"line":313},[83,664,474],{"emptyLinePlaceholder":473},[83,666,667,669,671,674,676,678,680,682,684],{"class":85,"line":327},[83,668,62],{"class":89},[83,670,588],{"class":228},[83,672,673],{"class":485}," divide",[83,675,248],{"class":99},[83,677,13],{"class":251},[83,679,254],{"class":99},[83,681,257],{"class":251},[83,683,260],{"class":99},[83,685,263],{"class":99},[83,687,688,690,692,694,696],{"class":85,"line":332},[83,689,608],{"class":89},[83,691,272],{"class":92},[83,693,362],{"class":99},[83,695,257],{"class":92},[83,697,280],{"class":99},[83,699,700],{"class":85,"line":337},[83,701,621],{"class":99},[83,703,704],{"class":85,"line":355},[83,705,474],{"emptyLinePlaceholder":473},[83,707,708,710,712,715,717,719,721,723,725],{"class":85,"line":369},[83,709,62],{"class":89},[83,711,588],{"class":228},[83,713,714],{"class":485}," multiply",[83,716,248],{"class":99},[83,718,13],{"class":251},[83,720,254],{"class":99},[83,722,257],{"class":251},[83,724,260],{"class":99},[83,726,263],{"class":99},[83,728,729,731,733,735,737],{"class":85,"line":374},[83,730,608],{"class":89},[83,732,272],{"class":92},[83,734,404],{"class":99},[83,736,257],{"class":92},[83,738,280],{"class":99},[83,740,741],{"class":85,"line":379},[83,742,621],{"class":99},[10,744,745],{},"What we did here was:",[118,747,748,754],{},[121,749,750,751,753],{},"Break down all the methods inside the exported ",[56,752,557],{}," object into their own separate and exportable files",[121,755,756],{},"Made it possible to specify what method we would like to use in our index.js",[10,758,759],{},"Below we will declare the function we want without worrying about dead code:",[74,761,763],{"className":76,"code":762,"language":78,"meta":79,"style":79},"import { add } from \".\u002Fcalculator\";\n\nconsole.log(add(1, 2)); \u002F\u002F Expected output: 3\n",[56,764,765,786,790],{"__ignoreMap":79},[83,766,767,769,771,773,775,777,779,782,784],{"class":85,"line":86},[83,768,58],{"class":89},[83,770,149],{"class":99},[83,772,591],{"class":92},[83,774,155],{"class":99},[83,776,158],{"class":89},[83,778,460],{"class":99},[83,780,781],{"class":103},".\u002Fcalculator",[83,783,466],{"class":99},[83,785,280],{"class":99},[83,787,788],{"class":85,"line":225},[83,789,474],{"emptyLinePlaceholder":473},[83,791,792,794,796,798,800,802,804,806,808,811,813,815],{"class":85,"line":241},[83,793,479],{"class":92},[83,795,482],{"class":99},[83,797,486],{"class":485},[83,799,248],{"class":92},[83,801,494],{"class":485},[83,803,248],{"class":92},[83,805,500],{"class":499},[83,807,254],{"class":99},[83,809,810],{"class":499}," 2",[83,812,508],{"class":92},[83,814,511],{"class":99},[83,816,514],{"class":221},[10,818,819],{},"How would we import other methods that were exported as modules from the same file?",[10,821,822,823,825],{},"For example, after you add two numbers you'd like to use the ",[56,824,529],{}," method for two other numbers.",[10,827,828,829,482],{},"We can do that within our destructuring object next to ",[56,830,494],{},[10,832,833],{},[37,834,443],{},[74,836,838],{"className":76,"code":837,"language":78,"meta":79,"style":79},"import { add, subtract} from \".\u002Fcalculator\";\n\nconsole.log(add(1, 2)); \u002F\u002F Expected output: 3\nconsole.log(subtract(15,  9)); \u002F\u002F Expeted output: 6\n",[56,839,840,865,869,895],{"__ignoreMap":79},[83,841,842,844,846,848,850,852,855,857,859,861,863],{"class":85,"line":86},[83,843,58],{"class":89},[83,845,149],{"class":99},[83,847,591],{"class":92},[83,849,254],{"class":99},[83,851,634],{"class":92},[83,853,854],{"class":99},"}",[83,856,158],{"class":89},[83,858,460],{"class":99},[83,860,781],{"class":103},[83,862,466],{"class":99},[83,864,280],{"class":99},[83,866,867],{"class":85,"line":225},[83,868,474],{"emptyLinePlaceholder":473},[83,870,871,873,875,877,879,881,883,885,887,889,891,893],{"class":85,"line":241},[83,872,479],{"class":92},[83,874,482],{"class":99},[83,876,486],{"class":485},[83,878,248],{"class":92},[83,880,494],{"class":485},[83,882,248],{"class":92},[83,884,500],{"class":499},[83,886,254],{"class":99},[83,888,810],{"class":499},[83,890,508],{"class":92},[83,892,511],{"class":99},[83,894,514],{"class":221},[83,896,897,899,901,903,905,907,909,911,913,915,917,919],{"class":85,"line":266},[83,898,479],{"class":92},[83,900,482],{"class":99},[83,902,486],{"class":485},[83,904,248],{"class":92},[83,906,529],{"class":485},[83,908,248],{"class":92},[83,910,534],{"class":499},[83,912,254],{"class":99},[83,914,539],{"class":499},[83,916,508],{"class":92},[83,918,511],{"class":99},[83,920,546],{"class":221},[10,922,923],{},"There you have it! We've now learned how to make our code tree shake ready. Not only are we happy but your code bundler is as well!",[10,925,926],{},"More Info on Tree Shaking, Destructuring, ES6 Modules:",[118,928,929,937,944,952],{},[121,930,931,936],{},[13,932,935],{"href":933,"rel":934},"https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Ffundamentals\u002Fperformance\u002Foptimizing-javascript\u002Ftree-shaking",[33],"Reduce JavaScript Payloads with Tree Shaking"," (Article)",[121,938,939,943],{},[13,940,942],{"href":49,"rel":941},[33],"Destructuring assignment"," (MDN Documentation)",[121,945,946,951],{},[13,947,950],{"href":948,"rel":949},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=-vR3a11Wzt0",[33],"Destructuring in ES6 - Beau teaches JavaScript"," (Video)",[121,953,954,936],{},[13,955,958],{"href":956,"rel":957},"https:\u002F\u002Fwww.sitepoint.com\u002Funderstanding-es6-modules\u002F",[33],"Understanding ES6 Modules",[10,960,961,962,967],{},"P.S. Huge thanks for ",[13,963,966],{"href":964,"rel":965},"https:\u002F\u002Fdev.to\u002Fjohannarlee",[33],"Johanna"," being the editor of this article!",[65,969],{},[10,971,972,973,978,979,982,983,482],{},"This blog post is a part of ",[13,974,977],{"href":975,"rel":976},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Fintroduction\u002Fguide\u002F",[33],"Vuetify Beginner's Guide Series",". 🐣 Each blog has been collaboratively worked on by the Vuetify Core Team. Interested in contributing a topic? ➡ Reach out to ",[13,980,966],{"href":964,"rel":981},[33]," on Dev.to or in the ",[13,984,987],{"href":985,"rel":986},"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fs93b7Fv",[33],"Vuetify Community Discord",[989,990,991],"style",{},"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 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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":79,"searchDepth":225,"depth":225,"links":993},[994,995],{"id":21,"depth":225,"text":22},{"id":202,"depth":225,"text":203},"2020-05-29","A brief overview of treeshaking in JavaScript","md",{},"\u002Fblog\u002Fwhat-is-tree-shaking",{"title":5,"description":997},"blog\u002Fwhat-is-tree-shaking","Vuetify Beginner's Guide Series:",[1005,1006,1007,1008],"beginners","vuetify","vue","javascript","UQkYXtETthFTuG8hGZR0wevS5Q80OEi-tre83YM0VoI",[1011,1016],{"title":1012,"path":1013,"stem":1014,"description":1015,"children":-1},"What is a CLI","\u002Fblog\u002Fwhat-is-a-cli","blog\u002Fwhat-is-a-cli","Introduction to a Command Line Interface",null,[1018,1026,1031,1037,1039,1044],{"title":1019,"date":1020,"tags":1021,"path":1025},"Demystifying the ECMAScript Spec: Array.prototype.push","2026-09-22",[1022,1023,1008,1024],"intermediate","ecmascript","tutorial","\u002Fblog\u002Fdemystifying-the-ecmascript-spec-array-push",{"title":1027,"date":1028,"tags":1029,"path":1030},"V-Card In Depth","2023-03-08",[1005,1006,1007,1008],"\u002Fblog\u002Fv-card-in-depth",{"title":1032,"date":1033,"tags":1034,"path":1036},"Getting Started With The Beacon API","2020-06-25",[1008,1035,1024],"web api","\u002Fblog\u002Fgetting-started-with-the-beacon-api",{"title":5,"date":996,"tags":1038,"path":1000},[1005,1006,1007,1008],{"title":1012,"date":1040,"tags":1041,"path":1013},"2020-05-11",[1042,1006,1043],"vue3","typescript",{"title":1045,"date":1046,"tags":1047,"path":1050},"Let's build a Github Profile Search Web App","2019-07-03",[1048,1008,1049,1024],"web project","github api","\u002Fblog\u002Flets-build-a-github-profile-search-web-app",1790258055669]