[{"data":1,"prerenderedAt":1024},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue常用性能优化":3},{"id":4,"title":5,"body":6,"description":1017,"extension":1018,"meta":1019,"navigation":93,"path":1020,"seo":1021,"stem":1022,"__hash__":1023},"content\u002FVue\u002FVue常用性能优化.md","Vue常用性能优化",{"type":7,"value":8,"toc":995},"minimark",[9,13,21,25,29,51,259,262,276,314,317,354,357,413,416,485,488,517,569,572,601,636,640,650,654,686,689,739,742,759,812,815,818,840,844,861,865,890,894,923,926,937,945,974,977,983,986,992],[10,11,5],"h1",{"id":12},"vue常用性能优化",[14,15,16,20],"p",{},[17,18,19],"code",{},"Vue","常用的一些优化方式，主要是在构建项目过程需要注意的方面。",[22,23,24],"h2",{"id":24},"编码优化",[26,27,28],"h3",{"id":28},"避免响应所有数据",[14,30,31,32,35,36,38,39,42,43,46,47,50],{},"不要将所有的数据都放到",[17,33,34],{},"data","中，",[17,37,34],{},"中的数据都会增加",[17,40,41],{},"getter","和",[17,44,45],{},"setter","，并且会收集",[17,48,49],{},"watcher","，这样还占内存，不需要响应式的数据我们可以直接定义在实例上。",[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n    \u003Cview>\n\n    \u003C\u002Fview>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        components: {},\n        data: () => ({\n            \n        }),\n        beforeCreate: function(){\n            this.timer = null;\n        }\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\u003C\u002Fstyle>\n","html","",[17,59,60,76,88,95,105,115,120,130,143,149,165,171,177,192,211,217,223,232,237,250],{"__ignoreMap":57},[61,62,65,69,73],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sVt8B","\u003C",[61,70,72],{"class":71},"s9eBZ","template",[61,74,75],{"class":67},">\n",[61,77,79,82,86],{"class":63,"line":78},2,[61,80,81],{"class":67},"    \u003C",[61,83,85],{"class":84},"s7hpK","view",[61,87,75],{"class":67},[61,89,91],{"class":63,"line":90},3,[61,92,94],{"emptyLinePlaceholder":93},true,"\n",[61,96,98,101,103],{"class":63,"line":97},4,[61,99,100],{"class":67},"    \u003C\u002F",[61,102,85],{"class":84},[61,104,75],{"class":67},[61,106,108,111,113],{"class":63,"line":107},5,[61,109,110],{"class":67},"\u003C\u002F",[61,112,72],{"class":71},[61,114,75],{"class":67},[61,116,118],{"class":63,"line":117},6,[61,119,94],{"emptyLinePlaceholder":93},[61,121,123,125,128],{"class":63,"line":122},7,[61,124,68],{"class":67},[61,126,127],{"class":71},"script",[61,129,75],{"class":67},[61,131,133,137,140],{"class":63,"line":132},8,[61,134,136],{"class":135},"szBVR","    export",[61,138,139],{"class":135}," default",[61,141,142],{"class":67}," {\n",[61,144,146],{"class":63,"line":145},9,[61,147,148],{"class":67},"        components: {},\n",[61,150,152,156,159,162],{"class":63,"line":151},10,[61,153,155],{"class":154},"sScJk","        data",[61,157,158],{"class":67},": () ",[61,160,161],{"class":135},"=>",[61,163,164],{"class":67}," ({\n",[61,166,168],{"class":63,"line":167},11,[61,169,170],{"class":67},"            \n",[61,172,174],{"class":63,"line":173},12,[61,175,176],{"class":67},"        }),\n",[61,178,180,183,186,189],{"class":63,"line":179},13,[61,181,182],{"class":154},"        beforeCreate",[61,184,185],{"class":67},": ",[61,187,188],{"class":135},"function",[61,190,191],{"class":67},"(){\n",[61,193,195,199,202,205,208],{"class":63,"line":194},14,[61,196,198],{"class":197},"sj4cs","            this",[61,200,201],{"class":67},".timer ",[61,203,204],{"class":135},"=",[61,206,207],{"class":197}," null",[61,209,210],{"class":67},";\n",[61,212,214],{"class":63,"line":213},15,[61,215,216],{"class":67},"        }\n",[61,218,220],{"class":63,"line":219},16,[61,221,222],{"class":67},"    }\n",[61,224,226,228,230],{"class":63,"line":225},17,[61,227,110],{"class":67},[61,229,127],{"class":71},[61,231,75],{"class":67},[61,233,235],{"class":63,"line":234},18,[61,236,94],{"emptyLinePlaceholder":93},[61,238,240,242,245,248],{"class":63,"line":239},19,[61,241,68],{"class":67},[61,243,244],{"class":71},"style",[61,246,247],{"class":154}," scoped",[61,249,75],{"class":67},[61,251,253,255,257],{"class":63,"line":252},20,[61,254,110],{"class":67},[61,256,244],{"class":71},[61,258,75],{"class":67},[26,260,261],{"id":261},"函数式组件",[14,263,264,265,268,269,271,272,275],{},"函数组是一个不包含状态和实例的组件，简单的说，就是组件不支持响应式，并且不能通过",[17,266,267],{},"this","关键字引用自己。因为函数式组件没有状态，所以它们不需要像",[17,270,19],{},"的响应式系统一样需要经过额外的初始化，这样就可以避免相关操作带来的性能消耗。当然函数式组件仍然会对相应的变化做出响应式改变，比如新传入新的",[17,273,274],{},"props","，但是在组件本身中，它无法知道数据何时发生了更改，因为它不维护自己的状态。很多场景非常适合使用函数式组件：",[277,278,279,305,308],"ul",{},[280,281,282,283,286,287,290,291,290,294,290,297,300,301,304],"li",{},"一个简单的展示组件，也就是所谓的",[17,284,285],{},"dumb","组件。例如",[17,288,289],{},"buttons","、",[17,292,293],{},"pills",[17,295,296],{},"tags",[17,298,299],{},"cards","等，甚至整个页面都是静态文本，比如",[17,302,303],{},"About","页面。",[280,306,307],{},"高阶组件，即用于接收一个组件作为参数，返回一个被包装过的组件。",[280,309,310,313],{},[17,311,312],{},"v-for","循环中的每项通常都是很好的候选项。",[26,315,316],{"id":316},"区分computed和watch使用场景",[14,318,319,322,323,325,326,328,329,331,332,335,338,339,341,342,344,345,347,348,350,351,353],{},[17,320,321],{},"computed","是计算属性，依赖其它属性值，并且",[17,324,321],{},"的值有缓存，只有它依赖的属性值发生改变，下一次获取",[17,327,321],{},"的值时才会重新计算",[17,330,321],{},"的值。",[333,334],"br",{},[17,336,337],{},"watch","更多的是观察的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。",[333,340],{},"\n当我们需要进行数值计算，并且依赖于其它数据时，应该使用",[17,343,321],{},"，因为可以利用",[17,346,321],{},"的缓存特性，避免每次获取值时，都要重新计算。当我们需要在数据变化时执行异步或开销较大的操作时，应该使用",[17,349,337],{},"，使用",[17,352,337],{},"选项允许我们执行异步操作，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。",[26,355,356],{"id":356},"v-for添加key且避免同时使用v-if",[277,358,359,398],{},[280,360,361,363,364,367,368,371,372,375,376,379,380,382,383,385,386,389,390,393,394,397],{},[17,362,312],{},"遍历必须为",[17,365,366],{},"item","添加",[17,369,370],{},"key","，且尽量不要使用",[17,373,374],{},"index","而要使用唯一",[17,377,378],{},"id","去标识",[17,381,366],{},"，在列表数据进行遍历渲染时，设置唯一",[17,384,370],{},"值方便",[17,387,388],{},"Vue.js","内部机制精准找到该条列表数据，当",[17,391,392],{},"state","更新时，新的状态值和旧的状态值对比，较快地定位到",[17,395,396],{},"diff","。",[280,399,400,402,403,406,407,409,410,412],{},[17,401,312],{},"遍历避免同时使用",[17,404,405],{},"v-if","，",[17,408,312],{},"比",[17,411,405],{},"优先级高，如果每一次都需要遍历整个数组，将会影响速度。",[26,414,415],{"id":415},"区分v-if与v-show使用场景",[277,417,418,442,455,467,476],{},[280,419,420,421,423,424,427,428,430,431,434,435,437,438,441],{},"实现方式: ",[17,422,405],{},"是动态的向",[17,425,426],{},"DOM","树内添加或者删除",[17,429,426],{},"元素，",[17,432,433],{},"v-show","是通过设置",[17,436,426],{},"元素的",[17,439,440],{},"display","样式属性控制显隐。",[280,443,444,445,447,448,450,451,454],{},"编译过程: ",[17,446,405],{},"切换有一个局部编译卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，",[17,449,433],{},"只是简单的基于",[17,452,453],{},"CSS","切换。",[280,456,457,458,460,461,463,464,466],{},"编译条件: ",[17,459,405],{},"是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译， ",[17,462,433],{},"是在任何条件下都被编译，然后被缓存，而且",[17,465,426],{},"元素保留。",[280,468,469,470,472,473,475],{},"性能消耗: ",[17,471,405],{},"有更高的切换消耗，",[17,474,433],{},"有更高的初始渲染消耗。",[280,477,478,479,481,482,484],{},"使用场景: ",[17,480,405],{},"适合条件不太可能改变的情况，",[17,483,433],{},"适合条件频繁切换的情况。",[26,486,487],{"id":487},"长列表性能优化",[14,489,490,492,493,496,497,499,500,503,504,42,507,509,510,513,514,516],{},[17,491,19],{},"会通过",[17,494,495],{},"Object.defineProperty","对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要",[17,498,19],{},"来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，可以通过",[17,501,502],{},"Object.freeze","方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。对于需要修改的长列表的优化大列表两个核心，一个分段一个区分，具体执行分为：仅渲染视窗可见的数据、进行函数节流、 减少驻留的",[17,505,506],{},"VNode",[17,508,19],{},"组件，不使用显示的子组件",[17,511,512],{},"slot","方式，改为手动创建虚拟",[17,515,426],{},"来切断对象引用。",[52,518,522],{"className":519,"code":520,"language":521,"meta":57,"style":57},"language-javascript shiki shiki-themes github-light github-dark","export default {\n  data: () => ({\n      users: {}\n  }),\n  async created() {\n      const users = await axios.get(\"\u002Fapi\u002Fusers\");\n      this.users = Object.freeze(users);\n  }\n};\n","javascript",[17,523,524,529,534,539,544,549,554,559,564],{"__ignoreMap":57},[61,525,526],{"class":63,"line":64},[61,527,528],{},"export default {\n",[61,530,531],{"class":63,"line":78},[61,532,533],{},"  data: () => ({\n",[61,535,536],{"class":63,"line":90},[61,537,538],{},"      users: {}\n",[61,540,541],{"class":63,"line":97},[61,542,543],{},"  }),\n",[61,545,546],{"class":63,"line":107},[61,547,548],{},"  async created() {\n",[61,550,551],{"class":63,"line":117},[61,552,553],{},"      const users = await axios.get(\"\u002Fapi\u002Fusers\");\n",[61,555,556],{"class":63,"line":122},[61,557,558],{},"      this.users = Object.freeze(users);\n",[61,560,561],{"class":63,"line":132},[61,562,563],{},"  }\n",[61,565,566],{"class":63,"line":145},[61,567,568],{},"};\n",[26,570,571],{"id":571},"路由懒加载",[14,573,574,576,577,580,581,583,584,586,587,290,590,593,594,597,598,600],{},[17,575,19],{},"是单页面应用，可能会有很多的路由引入，这样使用",[17,578,579],{},"webpcak","打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效。对于",[17,582,19],{},"路由懒加载的方式有",[17,585,19],{},"异步组件、动态",[17,588,589],{},"import",[17,591,592],{},"webpack","提供的",[17,595,596],{},"require.ensure","，最常用的就是动态",[17,599,589],{},"的方式。",[52,602,604],{"className":519,"code":603,"language":521,"meta":57,"style":57},"{\n  path: \"\u002Fexample\",\n  name: \"example\",\n  \u002F\u002F打包后，每个组件单独生成一个chunk文件\n  component: () => import(\"@\u002Fviews\u002Fexample.vue\")\n}\n",[17,605,606,611,616,621,626,631],{"__ignoreMap":57},[61,607,608],{"class":63,"line":64},[61,609,610],{},"{\n",[61,612,613],{"class":63,"line":78},[61,614,615],{},"  path: \"\u002Fexample\",\n",[61,617,618],{"class":63,"line":90},[61,619,620],{},"  name: \"example\",\n",[61,622,623],{"class":63,"line":97},[61,624,625],{},"  \u002F\u002F打包后，每个组件单独生成一个chunk文件\n",[61,627,628],{"class":63,"line":107},[61,629,630],{},"  component: () => import(\"@\u002Fviews\u002Fexample.vue\")\n",[61,632,633],{"class":63,"line":117},[61,634,635],{},"}\n",[26,637,639],{"id":638},"服务端渲染ssr","服务端渲染SSR",[14,641,642,643,646,647,649],{},"如果需要优化首屏加载速度并且首屏加载速度是至关重要的点，那么就需要服务端渲染",[17,644,645],{},"SSR","，服务端渲染",[17,648,645],{},"其实是优缺点并行的，需要合理决定是否真的需要服务端渲染。",[651,652,653],"h4",{"id":653},"优点",[277,655,656,669],{},[280,657,658,659,662,663,665,666,668],{},"更好的",[17,660,661],{},"SEO","，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，如果",[17,664,661],{},"对站点至关重要，而页面又是异步获取内容，则可能需要服务器端渲染",[17,667,645],{},"解决此问题。",[280,670,671,672,675,676,679,680,682,683,685],{},"更快的内容到达时间",[17,673,674],{},"time-to-content","，特别是对于缓慢的网络情况或运行缓慢的设备，无需等待所有的",[17,677,678],{},"JavaScript","都完成下载并执行，用户将会更快速地看到完整渲染的页面，通常可以产生更好的用户体验，并且对于那些内容到达时间",[17,681,674],{},"与转化率直接相关的应用程序而言，服务器端渲染",[17,684,645],{},"至关重要。",[651,687,688],{"id":688},"缺点",[277,690,691,702,713],{},[280,692,693,694,697,698,701],{},"开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数",[17,695,696],{},"lifecycle hook","中使用，一些外部扩展库",[17,699,700],{},"external library","可能需要特殊处理，才能在服务器渲染应用程序中运行。",[280,703,704,705,708,709,712],{},"涉及构建设置和部署的更多要求，与可以部署在任何静态文件服务器上的完全静态单页面应用程序",[17,706,707],{},"SPA","不同，服务器渲染应用程序，通常需要处于",[17,710,711],{},"Node.js server","运行环境。",[280,714,715,716,719,720,723,724,727,728,731,732,734,735,738],{},"更大的服务器端负载，在",[17,717,718],{},"Node.js","中渲染完整的应用程序，显然会比仅仅提供静态文件的",[17,721,722],{},"server","更加大量占用",[17,725,726],{},"CPU","资源",[17,729,730],{},"CPU-intensive","-",[17,733,726],{},"密集型，因此如果预料在高流量环境",[17,736,737],{},"high traffic","下使用，需要准备相应的服务器负载，并明智地采用缓存策略。",[26,740,741],{"id":741},"使用keep-alive组件",[14,743,744,745,748,749,751,752,755,756,758],{},"当在组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能等问题，使用",[17,746,747],{},"\u003Ckeep-alive>","包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。重新创建动态组件的行为通常是非常有用的，但是在有些情况下我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来，此时使用",[17,750,747],{},"包裹组件即可缓存当前组件实例，将组件缓存到内存，用于保留组件状态或避免重新渲染，和",[17,753,754],{},"\u003Ctransition>","相似它，其自身不会渲染一个",[17,757,426],{},"元素，也不会出现在组件的父组件链中。",[52,760,762],{"className":54,"code":761,"language":56,"meta":57,"style":57},"\u003Ckeep-alive>\n    \u003Ccomponent v-bind:is=\"currentComponent\" class=\"tab\">\u003C\u002Fcomponent>\n\u003C\u002Fkeep-alive>\n",[17,763,764,773,804],{"__ignoreMap":57},[61,765,766,768,771],{"class":63,"line":64},[61,767,68],{"class":67},[61,769,770],{"class":71},"keep-alive",[61,772,75],{"class":67},[61,774,775,777,780,783,785,789,792,794,797,800,802],{"class":63,"line":78},[61,776,81],{"class":67},[61,778,779],{"class":84},"component",[61,781,782],{"class":154}," v-bind:is",[61,784,204],{"class":67},[61,786,788],{"class":787},"sZZnC","\"currentComponent\"",[61,790,791],{"class":154}," class",[61,793,204],{"class":67},[61,795,796],{"class":787},"\"tab\"",[61,798,799],{"class":67},">\u003C\u002F",[61,801,779],{"class":84},[61,803,75],{"class":67},[61,805,806,808,810],{"class":63,"line":90},[61,807,110],{"class":67},[61,809,770],{"class":71},[61,811,75],{"class":67},[22,813,814],{"id":814},"打包优化",[26,816,817],{"id":817},"模板预编译",[14,819,820,821,823,824,826,827,829,830,832,833,836,837,839],{},"当使用",[17,822,426],{},"内模板或",[17,825,678],{},"内的字符串模板时，模板会在运行时被编译为渲染函数，通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。如果使用",[17,828,592],{},"，并且喜欢分离",[17,831,678],{},"和模板文件，可以使用",[17,834,835],{},"vue-template-loader","，其可以在构建过程中把模板文件转换成为",[17,838,678],{},"渲染函数。",[26,841,843],{"id":842},"sourcemap","SourceMap",[14,845,846,847,850,851,854,855,858,859,397],{},"在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩、去掉多余的空格、",[17,848,849],{},"babel","编译化后，最终将编译得到的代码会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有",[17,852,853],{},"bug","的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发来说不好调式定位问题，因此",[17,856,857],{},"sourceMap","出现了，它就是为了解决不好调式代码问题的，在线上环境则需要关闭",[17,860,857],{},[26,862,864],{"id":863},"配置splitchunksplugins","配置splitChunksPlugins",[14,866,867,870,871,874,875,878,879,881,882,885,886,889],{},[17,868,869],{},"Webpack","内置了专门用于提取多个",[17,872,873],{},"Chunk","中的公共部分的插件",[17,876,877],{},"CommonsChunkPlugin","，是用于提取公共代码的工具，",[17,880,877],{},"于",[17,883,884],{},"4.0","及以后被移除，使用",[17,887,888],{},"SplitChunksPlugin","替代。",[26,891,893],{"id":892},"使用treeshaking","使用treeShaking",[14,895,896,899,900,902,903,906,907,910,911,42,913,916,917,919,920,397],{},[17,897,898],{},"tree shaking","是一个术语，通常用于描述移除",[17,901,678],{},"上下文中的未引用代码",[17,904,905],{},"dead-code","，其依赖于",[17,908,909],{},"ES2015","模块系统中的静态结构特性，例如",[17,912,589],{},[17,914,915],{},"export","，这个术语和概念实际上是兴起于",[17,918,909],{},"模块打包工具",[17,921,922],{},"rollup",[26,924,925],{"id":925},"第三方插件的按需引入",[14,927,928,929,932,933,936],{},"我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助",[17,930,931],{},"babel-plugin-component","，然后可以只引入需要的组件，以达到减小项目体积的目的，以项目中引入",[17,934,935],{},"element-ui","组件库为例。",[52,938,943],{"className":939,"code":941,"language":942},[940],"language-text","{\n  \"presets\": [[\"es2015\", { \"modules\": false }]],\n  \"plugins\": [\n    [\n      \"component\",\n      {\n        \"libraryName\": \"element-ui\",\n        \"styleLibraryName\": \"theme-chalk\"\n      }\n    ]\n  ]\n}\n\n","text",[17,944,941],{"__ignoreMap":57},[52,946,948],{"className":519,"code":947,"language":521,"meta":57,"style":57},"import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\n\nVue.use(Button)\nVue.use(Select)\n",[17,949,950,955,960,964,969],{"__ignoreMap":57},[61,951,952],{"class":63,"line":64},[61,953,954],{},"import Vue from 'vue';\n",[61,956,957],{"class":63,"line":78},[61,958,959],{},"import { Button, Select } from 'element-ui';\n",[61,961,962],{"class":63,"line":90},[61,963,94],{"emptyLinePlaceholder":93},[61,965,966],{"class":63,"line":97},[61,967,968],{},"Vue.use(Button)\n",[61,970,971],{"class":63,"line":107},[61,972,973],{},"Vue.use(Select)\n",[22,975,976],{"id":976},"每日一题",[52,978,981],{"className":979,"code":980,"language":942},[940],"https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n",[17,982,980],{"__ignoreMap":57},[22,984,985],{"id":985},"参考",[52,987,990],{"className":988,"code":989,"language":942},[940],"https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F121000054\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002Ff372d0e3de80\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844903887787278349\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844904189999448071\nhttps:\u002F\u002Fwww.lagou.com\u002Flgeduarticle\u002F22278.html\nhttps:\u002F\u002Fwww.cnblogs.com\u002Fmmzuo-798\u002Fp\u002F11778044.html\nhttps:\u002F\u002Fblog.csdn.net\u002Fgtlbtnq9mr3\u002Farticle\u002Fdetails\u002F104889927\n",[17,991,989],{"__ignoreMap":57},[244,993,994],{},"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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":57,"searchDepth":78,"depth":78,"links":996},[997,1008,1015,1016],{"id":24,"depth":78,"text":24,"children":998},[999,1000,1001,1002,1003,1004,1005,1006,1007],{"id":28,"depth":90,"text":28},{"id":261,"depth":90,"text":261},{"id":316,"depth":90,"text":316},{"id":356,"depth":90,"text":356},{"id":415,"depth":90,"text":415},{"id":487,"depth":90,"text":487},{"id":571,"depth":90,"text":571},{"id":638,"depth":90,"text":639},{"id":741,"depth":90,"text":741},{"id":814,"depth":78,"text":814,"children":1009},[1010,1011,1012,1013,1014],{"id":817,"depth":90,"text":817},{"id":842,"depth":90,"text":843},{"id":863,"depth":90,"text":864},{"id":892,"depth":90,"text":893},{"id":925,"depth":90,"text":925},{"id":976,"depth":78,"text":976},{"id":985,"depth":78,"text":985},"Vue常用的一些优化方式，主要是在构建项目过程需要注意的方面。","md",{},"\u002Fvue\u002Fvue常用性能优化",{"title":5,"description":1017},"Vue\u002FVue常用性能优化","4A9DWOD8TkV0DWaqhPA99hG-cSB3T2Hlc9S0QYK8QS4",1791042470782]