[{"data":1,"prerenderedAt":798},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue路由懒加载":3},{"id":4,"title":5,"body":6,"description":790,"extension":791,"meta":792,"navigation":793,"path":794,"seo":795,"stem":796,"__hash__":797},"content\u002FVue\u002FVue路由懒加载.md","Vue路由懒加载",{"type":7,"value":8,"toc":781},"minimark",[9,13,26,30,35,44,158,180,239,254,302,320,388,391,418,452,470,525,530,584,588,603,757,760,768,771,777],[10,11,5],"h1",{"id":12},"vue路由懒加载",[14,15,16,17,21,22,25],"p",{},"对于",[18,19,20],"code",{},"SPA","单页应用，当打包构建时，",[18,23,24],{},"JavaScript","包会变得非常大，影响页面加载速度，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这就是路由的懒加载。",[27,28,29],"h2",{"id":29},"实现方式",[31,32,34],"h3",{"id":33},"vue异步组件","Vue异步组件",[14,36,37,40,41,43],{},[18,38,39],{},"Vue","允许以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。",[18,42,39],{},"只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-javascript shiki shiki-themes github-light github-dark","Vue.component(\"async-example\", function (resolve, reject) {\n  setTimeout(function() {\n    \u002F\u002F 向 `resolve` 回调传递组件定义\n    resolve({\n      template: \"\u003Cdiv>I am async!\u003C\u002Fdiv>\"\n    })\n  }, 1000)\n})\n","javascript","",[18,52,53,95,108,115,124,133,139,152],{"__ignoreMap":50},[54,55,58,62,66,69,73,76,80,83,87,89,92],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"sVt8B","Vue.",[54,63,65],{"class":64},"sScJk","component",[54,67,68],{"class":60},"(",[54,70,72],{"class":71},"sZZnC","\"async-example\"",[54,74,75],{"class":60},", ",[54,77,79],{"class":78},"szBVR","function",[54,81,82],{"class":60}," (",[54,84,86],{"class":85},"s4XuR","resolve",[54,88,75],{"class":60},[54,90,91],{"class":85},"reject",[54,93,94],{"class":60},") {\n",[54,96,98,101,103,105],{"class":56,"line":97},2,[54,99,100],{"class":64},"  setTimeout",[54,102,68],{"class":60},[54,104,79],{"class":78},[54,106,107],{"class":60},"() {\n",[54,109,111],{"class":56,"line":110},3,[54,112,114],{"class":113},"sJ8bj","    \u002F\u002F 向 `resolve` 回调传递组件定义\n",[54,116,118,121],{"class":56,"line":117},4,[54,119,120],{"class":64},"    resolve",[54,122,123],{"class":60},"({\n",[54,125,127,130],{"class":56,"line":126},5,[54,128,129],{"class":60},"      template: ",[54,131,132],{"class":71},"\"\u003Cdiv>I am async!\u003C\u002Fdiv>\"\n",[54,134,136],{"class":56,"line":135},6,[54,137,138],{"class":60},"    })\n",[54,140,142,145,149],{"class":56,"line":141},7,[54,143,144],{"class":60},"  }, ",[54,146,148],{"class":147},"sj4cs","1000",[54,150,151],{"class":60},")\n",[54,153,155],{"class":56,"line":154},8,[54,156,157],{"class":60},"})\n",[14,159,160,161,163,164,167,168,171,172,175,176,179],{},"这个工厂函数会收到一个",[18,162,86],{},"回调，这个回调函数会在你从服务器得到组件定义的时候被调用，当然也可以调用",[18,165,166],{},"reject(reason)","来表示加载失败，此处的",[18,169,170],{},"setTimeout","仅是用来演示异步传递组件定义用。将异步组件和",[18,173,174],{},"webpack","的",[18,177,178],{},"code-splitting","功能一起配合使用可以达到懒加载组件的效果。",[45,181,183],{"className":47,"code":182,"language":49,"meta":50,"style":50},"Vue.component(\"async-webpack-example\", function (resolve) {\n  \u002F\u002F 这个特殊的 `require` 语法将会告诉 webpack\n  \u002F\u002F 自动将你的构建代码切割成多个包，这些包\n  \u002F\u002F 会通过 Ajax 请求加载\n  require([\".\u002Fmy-async-component\"], resolve)\n})\n",[18,184,185,206,211,216,221,235],{"__ignoreMap":50},[54,186,187,189,191,193,196,198,200,202,204],{"class":56,"line":57},[54,188,61],{"class":60},[54,190,65],{"class":64},[54,192,68],{"class":60},[54,194,195],{"class":71},"\"async-webpack-example\"",[54,197,75],{"class":60},[54,199,79],{"class":78},[54,201,82],{"class":60},[54,203,86],{"class":85},[54,205,94],{"class":60},[54,207,208],{"class":56,"line":97},[54,209,210],{"class":113},"  \u002F\u002F 这个特殊的 `require` 语法将会告诉 webpack\n",[54,212,213],{"class":56,"line":110},[54,214,215],{"class":113},"  \u002F\u002F 自动将你的构建代码切割成多个包，这些包\n",[54,217,218],{"class":56,"line":117},[54,219,220],{"class":113},"  \u002F\u002F 会通过 Ajax 请求加载\n",[54,222,223,226,229,232],{"class":56,"line":126},[54,224,225],{"class":64},"  require",[54,227,228],{"class":60},"([",[54,230,231],{"class":71},"\".\u002Fmy-async-component\"",[54,233,234],{"class":60},"], resolve)\n",[54,236,237],{"class":56,"line":135},[54,238,157],{"class":60},[14,240,241,242,245,246,249,250,253],{},"也可以在工厂函数中返回一个",[18,243,244],{},"Promise","，把",[18,247,248],{},"webpack 2","和",[18,251,252],{},"ES2015","语法加在一起。",[45,255,257],{"className":47,"code":256,"language":49,"meta":50,"style":50},"Vue.component(\n  \"async-webpack-example\",\n  \u002F\u002F 这个动态导入会返回一个 `Promise` 对象。\n  () => import(\".\u002Fmy-async-component\")\n)\n",[18,258,259,268,276,281,298],{"__ignoreMap":50},[54,260,261,263,265],{"class":56,"line":57},[54,262,61],{"class":60},[54,264,65],{"class":64},[54,266,267],{"class":60},"(\n",[54,269,270,273],{"class":56,"line":97},[54,271,272],{"class":71},"  \"async-webpack-example\"",[54,274,275],{"class":60},",\n",[54,277,278],{"class":56,"line":110},[54,279,280],{"class":113},"  \u002F\u002F 这个动态导入会返回一个 `Promise` 对象。\n",[54,282,283,286,289,292,294,296],{"class":56,"line":117},[54,284,285],{"class":60},"  () ",[54,287,288],{"class":78},"=>",[54,290,291],{"class":78}," import",[54,293,68],{"class":60},[54,295,231],{"class":71},[54,297,151],{"class":60},[54,299,300],{"class":56,"line":126},[54,301,151],{"class":60},[14,303,304,305,308,309,311,312,315,316,319],{},"事实上我们在",[18,306,307],{},"Vue-Router","的配置上可以直接结合",[18,310,39],{},"的异步组件和",[18,313,314],{},"Webpack","的代码分割功能可以实现路由组件的懒加载，打包后每一个组件生成一个",[18,317,318],{},"js","文件。",[45,321,323],{"className":47,"code":322,"language":49,"meta":50,"style":50},"{\n  path: \"\u002Fexample\",\n  name: \"example\",\n  \u002F\u002F打包后，每个组件单独生成一个chunk文件\n  component: reslove => require([\"@\u002Fviews\u002Fexample.vue\"], resolve)\n}\n",[18,324,325,330,343,355,360,383],{"__ignoreMap":50},[54,326,327],{"class":56,"line":57},[54,328,329],{"class":60},"{\n",[54,331,332,335,338,341],{"class":56,"line":97},[54,333,334],{"class":64},"  path",[54,336,337],{"class":60},": ",[54,339,340],{"class":71},"\"\u002Fexample\"",[54,342,275],{"class":60},[54,344,345,348,350,353],{"class":56,"line":110},[54,346,347],{"class":64},"  name",[54,349,337],{"class":60},[54,351,352],{"class":71},"\"example\"",[54,354,275],{"class":60},[54,356,357],{"class":56,"line":117},[54,358,359],{"class":113},"  \u002F\u002F打包后，每个组件单独生成一个chunk文件\n",[54,361,362,365,367,370,373,376,378,381],{"class":56,"line":126},[54,363,364],{"class":64},"  component",[54,366,337],{"class":60},[54,368,369],{"class":85},"reslove",[54,371,372],{"class":78}," =>",[54,374,375],{"class":64}," require",[54,377,228],{"class":60},[54,379,380],{"class":71},"\"@\u002Fviews\u002Fexample.vue\"",[54,382,234],{"class":60},[54,384,385],{"class":56,"line":135},[54,386,387],{"class":60},"}\n",[31,389,390],{"id":390},"动态import",[14,392,393,394,397,398,401,402,405,406,409,410,413,414,417],{},"在",[18,395,396],{},"Webpack2","中，可以使用动态",[18,399,400],{},"import","语法来定义代码分块点",[18,403,404],{},"split point","，官方也是推荐使用这种方法，如果使用的是",[18,407,408],{},"Bable","，需要添加",[18,411,412],{},"syntax-dynamic-import","插件， 才能使",[18,415,416],{},"Babel","可以正确的解析语法。",[45,419,421],{"className":47,"code":420,"language":49,"meta":50,"style":50},"\u002F\u002F默认将每个组件，单独打包成一个js文件\nconst example = () => import(\"@\u002Fviews\u002Fexample.vue\")\n",[18,422,423,428],{"__ignoreMap":50},[54,424,425],{"class":56,"line":57},[54,426,427],{"class":113},"\u002F\u002F默认将每个组件，单独打包成一个js文件\n",[54,429,430,433,436,439,442,444,446,448,450],{"class":56,"line":97},[54,431,432],{"class":78},"const",[54,434,435],{"class":64}," example",[54,437,438],{"class":78}," =",[54,440,441],{"class":60}," () ",[54,443,288],{"class":78},[54,445,291],{"class":78},[54,447,68],{"class":60},[54,449,380],{"class":71},[54,451,151],{"class":60},[14,453,454,455,458,459,461,462,465,466,469],{},"有时我们想把某个路由下的所有组件都打包在同一个异步块",[18,456,457],{},"chunk","中，需要使用命名",[18,460,457],{},"一个特殊的注释语法来提供",[18,463,464],{},"chunk name","，需要",[18,467,468],{},"webpack > 2.4","。",[45,471,473],{"className":47,"code":472,"language":49,"meta":50,"style":50},"const example1 = () => import(\u002F* webpackChunkName: \"Example\" *\u002F \"@\u002Fviews\u002Fexample1.vue\");\nconst example2 = () => import(\u002F* webpackChunkName: \"Example\" *\u002F \"@\u002Fviews\u002Fexample2.vue\");\n",[18,474,475,501],{"__ignoreMap":50},[54,476,477,479,482,484,486,488,490,492,495,498],{"class":56,"line":57},[54,478,432],{"class":78},[54,480,481],{"class":64}," example1",[54,483,438],{"class":78},[54,485,441],{"class":60},[54,487,288],{"class":78},[54,489,291],{"class":64},[54,491,68],{"class":60},[54,493,494],{"class":113},"\u002F* webpackChunkName: \"Example\" *\u002F",[54,496,497],{"class":71}," \"@\u002Fviews\u002Fexample1.vue\"",[54,499,500],{"class":60},");\n",[54,502,503,505,508,510,512,514,516,518,520,523],{"class":56,"line":97},[54,504,432],{"class":78},[54,506,507],{"class":64}," example2",[54,509,438],{"class":78},[54,511,441],{"class":60},[54,513,288],{"class":78},[54,515,291],{"class":64},[54,517,68],{"class":60},[54,519,494],{"class":113},[54,521,522],{"class":71}," \"@\u002Fviews\u002Fexample2.vue\"",[54,524,500],{"class":60},[14,526,304,527,529],{},[18,528,307],{},"的配置上可以直接定义懒加载。",[45,531,533],{"className":47,"code":532,"language":49,"meta":50,"style":50},"{\n  path: \"\u002Fexample\",\n  name: \"example\",\n  \u002F\u002F打包后，每个组件单独生成一个chunk文件\n  component: () => import(\"@\u002Fviews\u002Fexample.vue\")\n}\n",[18,534,535,539,549,559,563,580],{"__ignoreMap":50},[54,536,537],{"class":56,"line":57},[54,538,329],{"class":60},[54,540,541,543,545,547],{"class":56,"line":97},[54,542,334],{"class":64},[54,544,337],{"class":60},[54,546,340],{"class":71},[54,548,275],{"class":60},[54,550,551,553,555,557],{"class":56,"line":110},[54,552,347],{"class":64},[54,554,337],{"class":60},[54,556,352],{"class":71},[54,558,275],{"class":60},[54,560,561],{"class":56,"line":117},[54,562,359],{"class":113},[54,564,565,567,570,572,574,576,578],{"class":56,"line":126},[54,566,364],{"class":64},[54,568,569],{"class":60},": () ",[54,571,288],{"class":78},[54,573,291],{"class":78},[54,575,68],{"class":60},[54,577,380],{"class":71},[54,579,151],{"class":60},[54,581,582],{"class":56,"line":135},[54,583,387],{"class":60},[31,585,587],{"id":586},"webpack提供的requireensure","webpack提供的require.ensure",[14,589,590,591,175,593,596,597,600,601,319],{},"使用",[18,592,174],{},[18,594,595],{},"require.ensure","，也可以实现按需加载，同样多个路由指定相同的",[18,598,599],{},"chunkName","也会合并打包成一个",[18,602,318],{},[45,604,606],{"className":47,"code":605,"language":49,"meta":50,"style":50},"\u002F\u002F require.ensure(dependencies: String[], callback: function(require), chunkName: String)\n{\n    path: \"\u002Fexample1\",\n    name: \"example1\",\n    component: resolve => require.ensure([], () => resolve(require(\"@\u002Fviews\u002Fexample1.vue\")), \"Example\")\n},\n{\n    path: \"\u002Fexample2\",\n    name: \"example2\",\n    component: resolve => require.ensure([], () => resolve(require(\"@\u002Fviews\u002Fexample2.vue\")), \"Example\")\n}\n",[18,607,608,613,617,629,641,684,689,693,704,716,752],{"__ignoreMap":50},[54,609,610],{"class":56,"line":57},[54,611,612],{"class":113},"\u002F\u002F require.ensure(dependencies: String[], callback: function(require), chunkName: String)\n",[54,614,615],{"class":56,"line":97},[54,616,329],{"class":60},[54,618,619,622,624,627],{"class":56,"line":110},[54,620,621],{"class":64},"    path",[54,623,337],{"class":60},[54,625,626],{"class":71},"\"\u002Fexample1\"",[54,628,275],{"class":60},[54,630,631,634,636,639],{"class":56,"line":117},[54,632,633],{"class":64},"    name",[54,635,337],{"class":60},[54,637,638],{"class":71},"\"example1\"",[54,640,275],{"class":60},[54,642,643,646,648,650,652,655,658,661,663,666,668,671,673,676,679,682],{"class":56,"line":126},[54,644,645],{"class":64},"    component",[54,647,337],{"class":60},[54,649,86],{"class":85},[54,651,372],{"class":78},[54,653,654],{"class":60}," require.",[54,656,657],{"class":64},"ensure",[54,659,660],{"class":60},"([], () ",[54,662,288],{"class":78},[54,664,665],{"class":64}," resolve",[54,667,68],{"class":60},[54,669,670],{"class":64},"require",[54,672,68],{"class":60},[54,674,675],{"class":71},"\"@\u002Fviews\u002Fexample1.vue\"",[54,677,678],{"class":60},")), ",[54,680,681],{"class":71},"\"Example\"",[54,683,151],{"class":60},[54,685,686],{"class":56,"line":135},[54,687,688],{"class":60},"},\n",[54,690,691],{"class":56,"line":141},[54,692,329],{"class":60},[54,694,695,697,699,702],{"class":56,"line":154},[54,696,621],{"class":64},[54,698,337],{"class":60},[54,700,701],{"class":71},"\"\u002Fexample2\"",[54,703,275],{"class":60},[54,705,707,709,711,714],{"class":56,"line":706},9,[54,708,633],{"class":64},[54,710,337],{"class":60},[54,712,713],{"class":71},"\"example2\"",[54,715,275],{"class":60},[54,717,719,721,723,725,727,729,731,733,735,737,739,741,743,746,748,750],{"class":56,"line":718},10,[54,720,645],{"class":64},[54,722,337],{"class":60},[54,724,86],{"class":85},[54,726,372],{"class":78},[54,728,654],{"class":60},[54,730,657],{"class":64},[54,732,660],{"class":60},[54,734,288],{"class":78},[54,736,665],{"class":64},[54,738,68],{"class":60},[54,740,670],{"class":64},[54,742,68],{"class":60},[54,744,745],{"class":71},"\"@\u002Fviews\u002Fexample2.vue\"",[54,747,678],{"class":60},[54,749,681],{"class":71},[54,751,151],{"class":60},[54,753,755],{"class":56,"line":754},11,[54,756,387],{"class":60},[27,758,759],{"id":759},"每日一题",[45,761,766],{"className":762,"code":764,"language":765},[763],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[18,767,764],{"__ignoreMap":50},[27,769,770],{"id":770},"参考",[45,772,775],{"className":773,"code":774,"language":765},[763],"https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F46843949\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002Fc27b1640a01b\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844904025746309127\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844904013842874376\nhttps:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000011519350\nhttps:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Fcomponents-dynamic-async.html\nhttps:\u002F\u002Frouter.vuejs.org\u002Fzh\u002Fguide\u002Fadvanced\u002Flazy-loading.htm\n",[18,776,774],{"__ignoreMap":50},[778,779,780],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":50,"searchDepth":97,"depth":97,"links":782},[783,788,789],{"id":29,"depth":97,"text":29,"children":784},[785,786,787],{"id":33,"depth":110,"text":34},{"id":390,"depth":110,"text":390},{"id":586,"depth":110,"text":587},{"id":759,"depth":97,"text":759},{"id":770,"depth":97,"text":770},"对于SPA单页应用，当打包构建时，JavaScript包会变得非常大，影响页面加载速度，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这就是路由的懒加载。","md",{},true,"\u002Fvue\u002Fvue路由懒加载",{"title":5,"description":790},"Vue\u002FVue路由懒加载","38e1_juTBQrWg3DvZRx3_8TU4lWQGAAn4WVVNkltl_w",1791042472267]