[{"data":1,"prerenderedAt":2981},["ShallowReactive",2],{"\u002Fpost\u002Freact-resposive-code-splitting":3},{"id":4,"title":5,"body":6,"date":2961,"description":18,"extension":2962,"hidden":2963,"image":2964,"meta":2965,"navigation":695,"path":2966,"seo":2967,"sitemap":2968,"stem":2973,"subtitle":2974,"tags":2975,"__hash__":2980},"posts\u002Fpost\u002Freact-resposive-code-splitting.md","React如何在同一個Repo用拆分不同裝置的Code",{"type":7,"value":8,"toc":2949},"minimark",[9,19,26,30,61,64,68,71,74,77,89,92,95,100,106,111,114,117,147,150,153,160,163,169,174,192,196,199,215,236,239,246,301,308,448,451,462,492,495,646,649,936,1047,1050,1055,1135,1138,1141,1144,1153,1162,1167,1172,1183,1434,1441,1444,1643,1646,1977,1980,2205,2208,2211,2214,2454,2456,2459,2473,2476,2749,2752,2901,2909,2915,2918,2931,2942,2945],[10,11,12],"p",{},[13,14,18],"a",{"href":15,"rel":16},"https:\u002F\u002Freact-code-splitting-example-self.vercel.app\u002F",[17],"nofollow","此文章的 Demo",[10,20,21],{},[13,22,25],{"href":23,"rel":24},"https:\u002F\u002Fgithub.com\u002Fyuenu\u002Freact-code-splitting",[17],"此文章的 Code",[27,28,29],"h2",{"id":29},"此文章適用以下情境",[31,32,33,45,48,55,58],"ul",{},[34,35,36,37,41,42],"li",{},"沒有打算製作 RWD 的網頁，是維持兩個版本，",[38,39,40],"code",{},"電腦版","、",[38,43,44],{},"手機版",[34,46,47],{},"電腦版與手機版用到的 API 及商業邏輯大致相同，但是卻拆分了 2 個專案，也各自部署到不同的 Domain",[34,49,50,51,54],{},"兩個版本的專案由",[38,52,53],{},"+3","個人同時維護，維護人員參差不齊",[34,56,57],{},"沒有特別為每個 core function 或 component 寫測試",[34,59,60],{},"沒有特別的人員來做 Code review",[27,62,63],{"id":63},"案例分析",[65,66,67],"h3",{"id":67},"維護問題",[10,69,70],{},"A 專案(電腦版、Desktop version)",[10,72,73],{},"B 專案(手機版、Mobile version)",[10,75,76],{},"專案會拆分成 2 個不同的專案，所以若要加上新功能的話必須兩個專案都要維護，視專案大小有可能會有不只 2 位以上人員同時在維護，並且人員交叉維護(甲偶爾維護 A 專案，主要維護 B 專案、乙偶爾維護 B 專案，主要維護 A 專案、丙兩個專案都維護)，若沒有做好代碼管理的話，後續的維護會是一個大災難",[78,79,80],"blockquote",{},[10,81,82,83,88],{},"基本上會遇到這種專案類型的都是比較舊的專案，因為那時候比較沒有",[13,84,87],{"href":85,"rel":86},"https:\u002F\u002Fzh.wikipedia.org\u002Fzh-tw\u002F%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1",[17],"RWD","的概念，加上手機端的用戶興起，每個網站都必須要支援手機端的網頁，因此原本只有設計電腦版的公司在不干擾原本程式碼的情形，便利用視窗大小來確認。所以便拆分了兩種版本，而隨著專案越來越大也無法隨意合併在一起，之後越走越遠直至平行。",[10,90,91],{},"基本上遇到這種情況加上產品還在線上的，不可能改專案架構。除非遇到公司業績大幅衰退，老闆發覺不妙才有可能進行一些調整。",[10,93,94],{},"但在這麼講也不可能直接整個打掉重做，因為做產品要考慮的面向太多了。所以我們可以從新專案開始使用這樣的架構來避免未來面臨的技術債。",[78,96,97],{},[10,98,99],{},"要改的東西太多了，那就改天吧",[10,101,102],{},[103,104,105],"del",{},"要改？老闆走",[10,107,108],{},[103,109,110],{},"不改？你走",[65,112,113],{"id":113},"使用者體驗問題",[10,115,116],{},"如：",[31,118,119,126,133,140],{},[34,120,121,122],{},"網家 PCHome(Desktop) ",[13,123,124],{"href":124,"rel":125},"https:\u002F\u002F24h.pchome.com.tw\u002F",[17],[34,127,128,129],{},"網家 PCHome(Mobile) ",[13,130,131],{"href":131,"rel":132},"https:\u002F\u002F24h.m.pchome.com.tw\u002F",[17],[34,134,135,136],{},"iT 邦幫忙(Desktop) ",[13,137,138],{"href":138,"rel":139},"https:\u002F\u002Fithelp.ithome.com.tw\u002F",[17],[34,141,142,143],{},"iT 邦幫忙(Mobile) ",[13,144,145],{"href":145,"rel":146},"https:\u002F\u002Fithelp.ithome.com.tw\u002Fm\u002F",[17],[10,148,149],{},"可以觀察到以上網址無非就是在 Domain 上加上 m 當作 mobile 的標誌",[10,151,152],{},"在一般的情況下這種方式是沒有問題的，但是假如你在電腦上開了手機版的 Domain ，頁面便會變得非常奇怪",[10,154,155],{},[156,157],"img",{"alt":158,"src":159},"PC Home mobile page","\u002Fimages\u002Fpost\u002Freact-resposive-code-splitting\u002Fpchome.webp",[10,161,162],{},"在 SEO 權重的分配下有可能 Mobile 的 Domain 上到了搜尋結果的第一頁，用戶點了頁面以為此網站有問題，就直接關掉此網頁",[10,164,165],{},[156,166],{"alt":167,"src":168},"ithelp mobile page","\u002Fimages\u002Fpost\u002Freact-resposive-code-splitting\u002Fithelp.webp",[78,170,171],{},[10,172,173],{},"我對 SEO 相關的優化不是太了解 😓 ，之前的工作都是使用 CSR(Client side render)的框架",[10,175,176,177,41,182,41,187],{},"對於什麼是 CSR 還是 SSR 這些名詞的人，可以看這 ",[13,178,181],{"href":179,"rel":180},"https:\u002F\u002Fweb.dev\u002Frendering-on-the-web\u002F",[17],"英文",[13,183,186],{"href":184,"rel":185},"https:\u002F\u002Fshubo.io\u002Frendering-patterns\u002F",[17],"繁體中文",[13,188,191],{"href":189,"rel":190},"https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7127426806088466446",[17],"掘金",[27,193,195],{"id":194},"正題開始-show-me-the-code","正題開始 Show me the code",[10,197,198],{},"此篇並沒有打算使用 monorepo 相關的框架來處理，主要使用的技術為",[31,200,201,208],{},[34,202,203],{},[13,204,207],{"href":205,"rel":206},"https:\u002F\u002Fvitejs.dev\u002F",[17],"Vitejs",[34,209,210],{},[13,211,214],{"href":212,"rel":213},"https:\u002F\u002Freact.dev\u002F",[17],"React.js",[78,216,217],{},[10,218,219,220,41,225,41,230,235],{},"但若你有考慮使用 monorepo ，可以考慮",[13,221,224],{"href":222,"rel":223},"https:\u002F\u002Flerna.js.org\u002F",[17],"lerna",[13,226,229],{"href":227,"rel":228},"https:\u002F\u002Fnx.dev\u002F",[17],"Nx",[13,231,234],{"href":232,"rel":233},"https:\u002F\u002Fturbo.build\u002F",[17],"Turborepo","，各框架都有各自的 trade off，建議研究各個優缺點再選擇適合專案的框架。",[65,237,238],{"id":238},"環境設置",[10,240,241,242,245],{},"此範例用的 library 版本，主要用 ",[38,243,244],{},"Typescript"," ，用 js 的小夥伴可以自己在做調整",[247,248,253],"pre",{"className":249,"code":250,"language":251,"meta":252,"style":252},"language-bash shiki shiki-themes light-plus tokyo-night","# bash\n❯ node -v\nv14.19.1\n❯ npm -v\n7.24.2\n","bash","",[38,254,255,264,279,285,295],{"__ignoreMap":252},[256,257,260],"span",{"class":258,"line":259},"line",1,[256,261,263],{"class":262},"shM36","# bash\n",[256,265,267,271,275],{"class":258,"line":266},2,[256,268,270],{"class":269},"smeoz","❯",[256,272,274],{"class":273},"s58z3"," node",[256,276,278],{"class":277},"sLkO9"," -v\n",[256,280,282],{"class":258,"line":281},3,[256,283,284],{"class":269},"v14.19.1\n",[256,286,288,290,293],{"class":258,"line":287},4,[256,289,270],{"class":269},[256,291,292],{"class":273}," npm",[256,294,278],{"class":277},[256,296,298],{"class":258,"line":297},5,[256,299,300],{"class":269},"7.24.2\n",[10,302,303,304,307],{},"Run ",[38,305,306],{},"npm create vite@latest"," 後的 package.json",[247,309,313],{"className":310,"code":311,"language":312,"meta":252,"style":252},"language-json shiki shiki-themes light-plus tokyo-night","\u002F\u002F package.json\n{\n  \u002F\u002F ...\n  \"dependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"vite\": \"^4.3.2\"\n  }\n}\n","json",[38,314,315,320,326,331,351,376,395,403,417,436,442],{"__ignoreMap":252},[256,316,317],{"class":258,"line":259},[256,318,319],{"class":262},"\u002F\u002F package.json\n",[256,321,322],{"class":258,"line":266},[256,323,325],{"class":324},"sNwUV","{\n",[256,327,328],{"class":258,"line":281},[256,329,330],{"class":262},"  \u002F\u002F ...\n",[256,332,333,337,341,344,348],{"class":258,"line":287},[256,334,336],{"class":335},"sdf50","  \"",[256,338,340],{"class":339},"spCCv","dependencies",[256,342,343],{"class":335},"\"",[256,345,347],{"class":346},"s6v6z",":",[256,349,350],{"class":324}," {\n",[256,352,353,356,360,362,364,368,371,373],{"class":258,"line":297},[256,354,355],{"class":335},"    \"",[256,357,359],{"class":358},"svi0L","react",[256,361,343],{"class":335},[256,363,347],{"class":346},[256,365,367],{"class":366},"sq7Q2"," \"",[256,369,370],{"class":273},"^18.2.0",[256,372,343],{"class":366},[256,374,375],{"class":346},",\n",[256,377,379,381,384,386,388,390,392],{"class":258,"line":378},6,[256,380,355],{"class":335},[256,382,383],{"class":358},"react-dom",[256,385,343],{"class":335},[256,387,347],{"class":346},[256,389,367],{"class":366},[256,391,370],{"class":273},[256,393,394],{"class":366},"\"\n",[256,396,398,401],{"class":258,"line":397},7,[256,399,400],{"class":324},"  }",[256,402,375],{"class":346},[256,404,406,408,411,413,415],{"class":258,"line":405},8,[256,407,336],{"class":335},[256,409,410],{"class":339},"devDependencies",[256,412,343],{"class":335},[256,414,347],{"class":346},[256,416,350],{"class":324},[256,418,420,422,425,427,429,431,434],{"class":258,"line":419},9,[256,421,355],{"class":335},[256,423,424],{"class":358},"vite",[256,426,343],{"class":335},[256,428,347],{"class":346},[256,430,367],{"class":366},[256,432,433],{"class":273},"^4.3.2",[256,435,394],{"class":366},[256,437,439],{"class":258,"line":438},10,[256,440,441],{"class":324},"  }\n",[256,443,445],{"class":258,"line":444},11,[256,446,447],{"class":324},"}\n",[10,449,450],{},"接著安裝 React-router-dom 及 @types\u002Fnode",[78,452,453],{},[10,454,455,456,461],{},"React router 自從 6.4 版本後做了許多改變，也許你該看看他們的",[13,457,460],{"href":458,"rel":459},"https:\u002F\u002Freactrouter.com\u002F",[17],"文檔"," ， 但現階段不建議使用在 Prod 上面，因為近期他們小版本更新的飛快，如果要穩定一點的版本建議還是使用 v5 ，遇到問題社群上的解答也相對比較多一點。",[247,463,465],{"className":249,"code":464,"language":251,"meta":252,"style":252},"yarn add react-router-dom && yarn add -D @types\u002Fnode\n",[38,466,467],{"__ignoreMap":252},[256,468,469,472,475,478,481,484,486,489],{"class":258,"line":259},[256,470,471],{"class":269},"yarn",[256,473,474],{"class":273}," add",[256,476,477],{"class":273}," react-router-dom",[256,479,480],{"class":346}," &&",[256,482,483],{"class":269}," yarn",[256,485,474],{"class":273},[256,487,488],{"class":277}," -D",[256,490,491],{"class":273}," @types\u002Fnode\n",[10,493,494],{},"安裝完後會變成",[247,496,499],{"className":310,"code":497,"highlights":498,"language":312,"meta":252,"style":252},"\u002F\u002F package.json\n{\n  \u002F\u002F ...\n  \"dependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-router-dom\": \"^6.11.2\"\n  },\n  \"devDependencies\": {\n    \"@types\u002Fnode\": \"^20.2.3\",\n    \"vite\": \"^4.3.2\"\n  }\n}\n",[397,438],[38,500,501,505,509,513,525,543,561,581,587,599,620,636,641],{"__ignoreMap":252},[256,502,503],{"class":258,"line":259},[256,504,319],{"class":262},[256,506,507],{"class":258,"line":266},[256,508,325],{"class":324},[256,510,511],{"class":258,"line":281},[256,512,330],{"class":262},[256,514,515,517,519,521,523],{"class":258,"line":287},[256,516,336],{"class":335},[256,518,340],{"class":339},[256,520,343],{"class":335},[256,522,347],{"class":346},[256,524,350],{"class":324},[256,526,527,529,531,533,535,537,539,541],{"class":258,"line":297},[256,528,355],{"class":335},[256,530,359],{"class":358},[256,532,343],{"class":335},[256,534,347],{"class":346},[256,536,367],{"class":366},[256,538,370],{"class":273},[256,540,343],{"class":366},[256,542,375],{"class":346},[256,544,545,547,549,551,553,555,557,559],{"class":258,"line":378},[256,546,355],{"class":335},[256,548,383],{"class":358},[256,550,343],{"class":335},[256,552,347],{"class":346},[256,554,367],{"class":366},[256,556,370],{"class":273},[256,558,343],{"class":366},[256,560,375],{"class":346},[256,562,565,567,570,572,574,576,579],{"class":563,"line":397},[258,564],"highlight",[256,566,355],{"class":335},[256,568,569],{"class":358},"react-router-dom",[256,571,343],{"class":335},[256,573,347],{"class":346},[256,575,367],{"class":366},[256,577,578],{"class":273},"^6.11.2",[256,580,394],{"class":366},[256,582,583,585],{"class":258,"line":405},[256,584,400],{"class":324},[256,586,375],{"class":346},[256,588,589,591,593,595,597],{"class":258,"line":419},[256,590,336],{"class":335},[256,592,410],{"class":339},[256,594,343],{"class":335},[256,596,347],{"class":346},[256,598,350],{"class":324},[256,600,602,604,607,609,611,613,616,618],{"class":601,"line":438},[258,564],[256,603,355],{"class":335},[256,605,606],{"class":358},"@types\u002Fnode",[256,608,343],{"class":335},[256,610,347],{"class":346},[256,612,367],{"class":366},[256,614,615],{"class":273},"^20.2.3",[256,617,343],{"class":366},[256,619,375],{"class":346},[256,621,622,624,626,628,630,632,634],{"class":258,"line":444},[256,623,355],{"class":335},[256,625,424],{"class":358},[256,627,343],{"class":335},[256,629,347],{"class":346},[256,631,367],{"class":366},[256,633,433],{"class":273},[256,635,394],{"class":366},[256,637,639],{"class":258,"line":638},12,[256,640,441],{"class":324},[256,642,644],{"class":258,"line":643},13,[256,645,447],{"class":324},[10,647,648],{},"接著調整一下 vite.config.ts 以及 tsconfig.json",[247,650,661],{"className":651,"code":652,"highlights":653,"language":659,"meta":660,"style":252},"language-ts shiki shiki-themes light-plus tokyo-night","\u002F\u002F vite.config.ts\n\u002F** @type {import('vite').UserConfig} *\u002F\n\nimport { fileURLToPath, URL } from 'node:url'\nimport react from '@vitejs\u002Fplugin-react'\nimport { defineConfig } from 'vite'\n\n\u002F\u002F https:\u002F\u002Fvitejs.dev\u002Fconfig\u002F\nexport default defineConfig({\n  plugins: [react()],\n  resolve: {\n    alias: [\n      {\n        find: '@',\n        replacement: fileURLToPath(new URL('.\u002Fsrc', import.meta.url)),\n      },\n    ],\n  },\n})\n",[287,444,638,643,654,655,656,657,658],14,15,16,17,18,"ts","showLineNumbers",[38,662,663,668,691,697,732,748,767,771,776,791,810,820,831,837,856,907,915,923,930],{"__ignoreMap":252},[256,664,665],{"class":258,"line":259},[256,666,667],{"class":262},"\u002F\u002F vite.config.ts\n",[256,669,670,673,677,681,685,688],{"class":258,"line":266},[256,671,672],{"class":262},"\u002F** ",[256,674,676],{"class":675},"se7cl","@type",[256,678,680],{"class":679},"sHKXH"," {",[256,682,684],{"class":683},"s6uJR","import('vite').UserConfig",[256,686,687],{"class":679},"}",[256,689,690],{"class":262}," *\u002F\n",[256,692,693],{"class":258,"line":281},[256,694,696],{"emptyLinePlaceholder":695},true,"\n",[256,698,700,704,707,711,714,717,720,723,726,729],{"class":699,"line":287},[258,564],[256,701,703],{"class":702},"swGrk","import",[256,705,706],{"class":324}," { ",[256,708,710],{"class":709},"sTOFy","fileURLToPath",[256,712,713],{"class":346},",",[256,715,716],{"class":709}," URL",[256,718,719],{"class":324}," }",[256,721,722],{"class":702}," from",[256,724,725],{"class":366}," '",[256,727,728],{"class":273},"node:url",[256,730,731],{"class":366},"'\n",[256,733,734,736,739,741,743,746],{"class":258,"line":297},[256,735,703],{"class":702},[256,737,738],{"class":709}," react",[256,740,722],{"class":702},[256,742,725],{"class":366},[256,744,745],{"class":273},"@vitejs\u002Fplugin-react",[256,747,731],{"class":366},[256,749,750,752,754,757,759,761,763,765],{"class":258,"line":378},[256,751,703],{"class":702},[256,753,706],{"class":324},[256,755,756],{"class":709},"defineConfig",[256,758,719],{"class":324},[256,760,722],{"class":702},[256,762,725],{"class":366},[256,764,424],{"class":273},[256,766,731],{"class":366},[256,768,769],{"class":258,"line":397},[256,770,696],{"emptyLinePlaceholder":695},[256,772,773],{"class":258,"line":405},[256,774,775],{"class":262},"\u002F\u002F https:\u002F\u002Fvitejs.dev\u002Fconfig\u002F\n",[256,777,778,781,784,788],{"class":258,"line":419},[256,779,780],{"class":702},"export",[256,782,783],{"class":702}," default",[256,785,787],{"class":786},"sjNAT"," defineConfig",[256,789,790],{"class":324},"({\n",[256,792,793,797,800,803,805,808],{"class":258,"line":438},[256,794,796],{"class":795},"sF_0_","  plugins",[256,798,347],{"class":799},"s4YYt",[256,801,802],{"class":324}," [",[256,804,359],{"class":786},[256,806,807],{"class":324},"()]",[256,809,375],{"class":346},[256,811,813,816,818],{"class":812,"line":444},[258,564],[256,814,815],{"class":795},"  resolve",[256,817,347],{"class":799},[256,819,350],{"class":324},[256,821,823,826,828],{"class":822,"line":638},[258,564],[256,824,825],{"class":795},"    alias",[256,827,347],{"class":799},[256,829,830],{"class":324}," [\n",[256,832,834],{"class":833,"line":643},[258,564],[256,835,836],{"class":324},"      {\n",[256,838,840,844,846,848,851,854],{"class":839,"line":654},[258,564],[256,841,843],{"class":842},"sCl7R","        find",[256,845,347],{"class":799},[256,847,725],{"class":366},[256,849,850],{"class":273},"@",[256,852,853],{"class":366},"'",[256,855,375],{"class":346},[256,857,859,862,864,867,870,874,876,878,880,883,885,887,890,893,897,899,902,905],{"class":858,"line":655},[258,564],[256,860,861],{"class":842},"        replacement",[256,863,347],{"class":799},[256,865,866],{"class":786}," fileURLToPath",[256,868,869],{"class":324},"(",[256,871,873],{"class":872},"s00W4","new",[256,875,716],{"class":786},[256,877,869],{"class":324},[256,879,853],{"class":366},[256,881,882],{"class":273},".\u002Fsrc",[256,884,853],{"class":366},[256,886,713],{"class":346},[256,888,889],{"class":702}," import",[256,891,892],{"class":346},".",[256,894,896],{"class":895},"se0OL","meta",[256,898,892],{"class":346},[256,900,901],{"class":895},"url",[256,903,904],{"class":324},"))",[256,906,375],{"class":346},[256,908,910,913],{"class":909,"line":656},[258,564],[256,911,912],{"class":324},"      }",[256,914,375],{"class":346},[256,916,918,921],{"class":917,"line":657},[258,564],[256,919,920],{"class":324},"    ]",[256,922,375],{"class":346},[256,924,926,928],{"class":925,"line":658},[258,564],[256,927,400],{"class":324},[256,929,375],{"class":346},[256,931,933],{"class":258,"line":932},19,[256,934,935],{"class":324},"})\n",[247,937,940],{"className":310,"code":938,"highlights":939,"language":312,"meta":252,"style":252},"\u002F\u002F tsconfig.json\n{\n  \"compilerOptions\": {\n    \u002F\u002F ....\n    \u002F\u002F 加上這兩行，讓 vscode，能夠自動抓到相對應的路徑\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n    }\n  }\n}\n",[378,397,405],[38,941,942,947,951,964,969,974,994,1008,1034,1039,1043],{"__ignoreMap":252},[256,943,944],{"class":258,"line":259},[256,945,946],{"class":262},"\u002F\u002F tsconfig.json\n",[256,948,949],{"class":258,"line":266},[256,950,325],{"class":324},[256,952,953,955,958,960,962],{"class":258,"line":281},[256,954,336],{"class":335},[256,956,957],{"class":339},"compilerOptions",[256,959,343],{"class":335},[256,961,347],{"class":346},[256,963,350],{"class":324},[256,965,966],{"class":258,"line":287},[256,967,968],{"class":262},"    \u002F\u002F ....\n",[256,970,971],{"class":258,"line":297},[256,972,973],{"class":262},"    \u002F\u002F 加上這兩行，讓 vscode，能夠自動抓到相對應的路徑\n",[256,975,977,979,982,984,986,988,990,992],{"class":976,"line":378},[258,564],[256,978,355],{"class":335},[256,980,981],{"class":358},"baseUrl",[256,983,343],{"class":335},[256,985,347],{"class":346},[256,987,367],{"class":366},[256,989,892],{"class":273},[256,991,343],{"class":366},[256,993,375],{"class":346},[256,995,997,999,1002,1004,1006],{"class":996,"line":397},[258,564],[256,998,355],{"class":335},[256,1000,1001],{"class":358},"paths",[256,1003,343],{"class":335},[256,1005,347],{"class":346},[256,1007,350],{"class":324},[256,1009,1011,1014,1018,1020,1022,1024,1026,1029,1031],{"class":1010,"line":405},[258,564],[256,1012,1013],{"class":335},"      \"",[256,1015,1017],{"class":1016},"sLNXl","@\u002F*",[256,1019,343],{"class":335},[256,1021,347],{"class":346},[256,1023,802],{"class":324},[256,1025,343],{"class":366},[256,1027,1028],{"class":273},".\u002Fsrc\u002F*",[256,1030,343],{"class":366},[256,1032,1033],{"class":324},"]\n",[256,1035,1036],{"class":258,"line":419},[256,1037,1038],{"class":324},"    }\n",[256,1040,1041],{"class":258,"line":438},[256,1042,441],{"class":324},[256,1044,1045],{"class":258,"line":444},[256,1046,447],{"class":324},[10,1048,1049],{},".eslintrc.cjs 會噴錯，先修正一下",[78,1051,1052],{},[10,1053,1054],{},"'module' is not defined. eslint (no-undef)",[247,1056,1061],{"className":1057,"code":1058,"highlights":1059,"language":1060,"meta":252,"style":252},"language-js shiki shiki-themes light-plus tokyo-night","\u002F\u002F .eslintrc.cjs\nmodule.exports = {\n  env: { browser: true, es2020: true, node: true }, \u002F\u002F 加上 node: true\n  \u002F\u002F ...\n}\n",[281],"js",[38,1062,1063,1068,1084,1127,1131],{"__ignoreMap":252},[256,1064,1065],{"class":258,"line":259},[256,1066,1067],{"class":262},"\u002F\u002F .eslintrc.cjs\n",[256,1069,1070,1074,1076,1079,1082],{"class":258,"line":266},[256,1071,1073],{"class":1072},"sX0bS","module",[256,1075,892],{"class":346},[256,1077,1078],{"class":1072},"exports",[256,1080,1081],{"class":346}," =",[256,1083,350],{"class":324},[256,1085,1087,1090,1092,1094,1097,1099,1103,1105,1108,1110,1112,1114,1116,1118,1120,1122,1124],{"class":1086,"line":281},[258,564],[256,1088,1089],{"class":795},"  env",[256,1091,347],{"class":799},[256,1093,680],{"class":324},[256,1095,1096],{"class":795}," browser",[256,1098,347],{"class":799},[256,1100,1102],{"class":1101},"s0ObY"," true",[256,1104,713],{"class":346},[256,1106,1107],{"class":795}," es2020",[256,1109,347],{"class":799},[256,1111,1102],{"class":1101},[256,1113,713],{"class":346},[256,1115,274],{"class":795},[256,1117,347],{"class":799},[256,1119,1102],{"class":1101},[256,1121,719],{"class":324},[256,1123,713],{"class":346},[256,1125,1126],{"class":262}," \u002F\u002F 加上 node: true\n",[256,1128,1129],{"class":258,"line":287},[256,1130,330],{"class":262},[256,1132,1133],{"class":258,"line":297},[256,1134,447],{"class":324},[10,1136,1137],{},"到這邊專案的初始設定算是好了",[1139,1140],"hr",{},[65,1142,1143],{"id":1143},"主邏輯",[10,1145,1146,1147,1152],{},"主要是利用了",[13,1148,1151],{"href":1149,"rel":1150},"https:\u002F\u002Freact.dev\u002Freference\u002Freact\u002Flazy",[17],"React.lazy"," dynamic import 的功能，盡可能把 bundle size 壓到最小，讓用戶在初始載入的速讀提升。",[10,1154,1155,1156,1161],{},"在搭配",[13,1157,1160],{"href":1158,"rel":1159},"https:\u002F\u002Fgithub.com\u002Fyocontra\u002Freact-responsive",[17],"react-responsive","，判斷用戶視窗大小來載入是 Desktop 還是 Mobile 的檔案",[78,1163,1164],{},[10,1165,1166],{},"React Suspense & React Lazy 為 16.6 以後的版本才有的功能",[10,1168,1169],{},[38,1170,1171],{},"以下為資料夾結構",[31,1173,1174,1177,1180],{},[34,1175,1176],{},".\u002Fsrc\u002F* ，共用的邏輯 Hooks、API、components、store、utils",[34,1178,1179],{},".\u002Fsrc\u002Fapps\u002FDesktop ， 電腦版的邏輯，也可以有自己的 Hooks、API",[34,1181,1182],{},".\u002Fsrc\u002Fapps\u002FMobile ， 手機版的邏輯，也可以有自己的 Hooks、API",[247,1184,1188],{"className":1185,"code":1186,"language":1187,"meta":252,"style":252},"language-tree shiki shiki-themes light-plus tokyo-night","├── node_modules\n├── public\n├── src\n│   ├── apps\n│   │   │\n│   │   ├── index.tsx \u002F\u002F 導出 Desktop & Mobile\n│   │   ├── Desktop\n│   │   │     ├── components  \u002F\u002F 電腦版的components\n│   │   │     ├── pages \u002F\u002F 電腦版的頁面\n│   │   │     │     ├── Home.tsx\n│   │   │     │     ├── About.tsx\n│   │   │     │     └── Prod.tsx\n│   │   │     │\n│   │   │     ├── App.tsx\n│   │   │     ├── index.tsx\n│   │   │     └── router.tsx\n│   │   │\n│   │   └──  Mobile\n│   │         ├── components \u002F\u002F 手機版的components\n│   │         ├── pages \u002F\u002F 手機版的頁面\n│   │         │     ├── Home.tsx\n│   │         │     ├── About.tsx\n│   │         │     └── Prod.tsx\n│   │         │\n│   │         ├── App.tsx\n│   │         ├── index.tsx\n│   │         └── router.tsx\n│   │\n│   ├── api  \u002F\u002F 共用的 API\n│   ├── components  \u002F\u002F 共用的 components\n│   ├── hooks  \u002F\u002F 共用的 hooks\n│   ├── store  \u002F\u002F 共用的 store\n│   ├── utils  \u002F\u002F 共用的 utils\n│   ├── App.tsx\n│   ├── index.css\n│   └── main.tsx\n│\n├── .eslintrc.cjs\n├── .gitignore\n├── package.json\n├── package-lock.json\n├── tsconfig.json\n├── tsconfig.node.json\n└── vite.config.ts\n","tree",[38,1189,1190,1195,1200,1205,1210,1215,1220,1225,1230,1235,1240,1245,1250,1255,1260,1265,1270,1274,1279,1284,1290,1296,1302,1308,1314,1320,1326,1332,1338,1344,1350,1356,1362,1368,1374,1380,1386,1392,1398,1404,1410,1416,1422,1428],{"__ignoreMap":252},[256,1191,1192],{"class":258,"line":259},[256,1193,1194],{},"├── node_modules\n",[256,1196,1197],{"class":258,"line":266},[256,1198,1199],{},"├── public\n",[256,1201,1202],{"class":258,"line":281},[256,1203,1204],{},"├── src\n",[256,1206,1207],{"class":258,"line":287},[256,1208,1209],{},"│   ├── apps\n",[256,1211,1212],{"class":258,"line":297},[256,1213,1214],{},"│   │   │\n",[256,1216,1217],{"class":258,"line":378},[256,1218,1219],{},"│   │   ├── index.tsx \u002F\u002F 導出 Desktop & Mobile\n",[256,1221,1222],{"class":258,"line":397},[256,1223,1224],{},"│   │   ├── Desktop\n",[256,1226,1227],{"class":258,"line":405},[256,1228,1229],{},"│   │   │     ├── components  \u002F\u002F 電腦版的components\n",[256,1231,1232],{"class":258,"line":419},[256,1233,1234],{},"│   │   │     ├── pages \u002F\u002F 電腦版的頁面\n",[256,1236,1237],{"class":258,"line":438},[256,1238,1239],{},"│   │   │     │     ├── Home.tsx\n",[256,1241,1242],{"class":258,"line":444},[256,1243,1244],{},"│   │   │     │     ├── About.tsx\n",[256,1246,1247],{"class":258,"line":638},[256,1248,1249],{},"│   │   │     │     └── Prod.tsx\n",[256,1251,1252],{"class":258,"line":643},[256,1253,1254],{},"│   │   │     │\n",[256,1256,1257],{"class":258,"line":654},[256,1258,1259],{},"│   │   │     ├── App.tsx\n",[256,1261,1262],{"class":258,"line":655},[256,1263,1264],{},"│   │   │     ├── index.tsx\n",[256,1266,1267],{"class":258,"line":656},[256,1268,1269],{},"│   │   │     └── router.tsx\n",[256,1271,1272],{"class":258,"line":657},[256,1273,1214],{},[256,1275,1276],{"class":258,"line":658},[256,1277,1278],{},"│   │   └──  Mobile\n",[256,1280,1281],{"class":258,"line":932},[256,1282,1283],{},"│   │         ├── components \u002F\u002F 手機版的components\n",[256,1285,1287],{"class":258,"line":1286},20,[256,1288,1289],{},"│   │         ├── pages \u002F\u002F 手機版的頁面\n",[256,1291,1293],{"class":258,"line":1292},21,[256,1294,1295],{},"│   │         │     ├── Home.tsx\n",[256,1297,1299],{"class":258,"line":1298},22,[256,1300,1301],{},"│   │         │     ├── About.tsx\n",[256,1303,1305],{"class":258,"line":1304},23,[256,1306,1307],{},"│   │         │     └── Prod.tsx\n",[256,1309,1311],{"class":258,"line":1310},24,[256,1312,1313],{},"│   │         │\n",[256,1315,1317],{"class":258,"line":1316},25,[256,1318,1319],{},"│   │         ├── App.tsx\n",[256,1321,1323],{"class":258,"line":1322},26,[256,1324,1325],{},"│   │         ├── index.tsx\n",[256,1327,1329],{"class":258,"line":1328},27,[256,1330,1331],{},"│   │         └── router.tsx\n",[256,1333,1335],{"class":258,"line":1334},28,[256,1336,1337],{},"│   │\n",[256,1339,1341],{"class":258,"line":1340},29,[256,1342,1343],{},"│   ├── api  \u002F\u002F 共用的 API\n",[256,1345,1347],{"class":258,"line":1346},30,[256,1348,1349],{},"│   ├── components  \u002F\u002F 共用的 components\n",[256,1351,1353],{"class":258,"line":1352},31,[256,1354,1355],{},"│   ├── hooks  \u002F\u002F 共用的 hooks\n",[256,1357,1359],{"class":258,"line":1358},32,[256,1360,1361],{},"│   ├── store  \u002F\u002F 共用的 store\n",[256,1363,1365],{"class":258,"line":1364},33,[256,1366,1367],{},"│   ├── utils  \u002F\u002F 共用的 utils\n",[256,1369,1371],{"class":258,"line":1370},34,[256,1372,1373],{},"│   ├── App.tsx\n",[256,1375,1377],{"class":258,"line":1376},35,[256,1378,1379],{},"│   ├── index.css\n",[256,1381,1383],{"class":258,"line":1382},36,[256,1384,1385],{},"│   └── main.tsx\n",[256,1387,1389],{"class":258,"line":1388},37,[256,1390,1391],{},"│\n",[256,1393,1395],{"class":258,"line":1394},38,[256,1396,1397],{},"├── .eslintrc.cjs\n",[256,1399,1401],{"class":258,"line":1400},39,[256,1402,1403],{},"├── .gitignore\n",[256,1405,1407],{"class":258,"line":1406},40,[256,1408,1409],{},"├── package.json\n",[256,1411,1413],{"class":258,"line":1412},41,[256,1414,1415],{},"├── package-lock.json\n",[256,1417,1419],{"class":258,"line":1418},42,[256,1420,1421],{},"├── tsconfig.json\n",[256,1423,1425],{"class":258,"line":1424},43,[256,1426,1427],{},"├── tsconfig.node.json\n",[256,1429,1431],{"class":258,"line":1430},44,[256,1432,1433],{},"└── vite.config.ts\n",[10,1435,1436,1437],{},"已下是 Desktop 的 code，Mobile 的就依樣畫葫蘆，若有問題請看",[13,1438,1440],{"href":23,"rel":1439},[17],"demo repo",[10,1442,1443],{},"路徑: src\u002Fapps\u002FDesktop\u002Findex.tsx",[247,1445,1447],{"className":1057,"code":1446,"language":1060,"meta":660,"style":252},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Findex.tsx\nimport React, { Suspense } from 'react'\n\nimport { LoadingSpinner } from '@\u002Fcomponents\u002FLoading'\n\nconst App = React.lazy(() => import('.\u002FApp'))\nconst AsyncApp = () => {\n  return (\n    \u003CSuspense fallback={\u003CLoadingSpinner \u002F>}>\n      \u003CApp \u002F>\n    \u003C\u002FSuspense>\n  )\n}\nexport default AsyncApp\n",[38,1448,1449,1454,1478,1482,1502,1506,1547,1563,1572,1605,1616,1625,1630,1634],{"__ignoreMap":252},[256,1450,1451],{"class":258,"line":259},[256,1452,1453],{"class":262},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Findex.tsx\n",[256,1455,1456,1458,1461,1463,1465,1468,1470,1472,1474,1476],{"class":258,"line":266},[256,1457,703],{"class":702},[256,1459,1460],{"class":709}," React",[256,1462,713],{"class":346},[256,1464,706],{"class":324},[256,1466,1467],{"class":709},"Suspense",[256,1469,719],{"class":324},[256,1471,722],{"class":702},[256,1473,725],{"class":366},[256,1475,359],{"class":273},[256,1477,731],{"class":366},[256,1479,1480],{"class":258,"line":281},[256,1481,696],{"emptyLinePlaceholder":695},[256,1483,1484,1486,1488,1491,1493,1495,1497,1500],{"class":258,"line":287},[256,1485,703],{"class":702},[256,1487,706],{"class":324},[256,1489,1490],{"class":709},"LoadingSpinner",[256,1492,719],{"class":324},[256,1494,722],{"class":702},[256,1496,725],{"class":366},[256,1498,1499],{"class":273},"@\u002Fcomponents\u002FLoading",[256,1501,731],{"class":366},[256,1503,1504],{"class":258,"line":297},[256,1505,696],{"emptyLinePlaceholder":695},[256,1507,1508,1512,1516,1518,1521,1523,1526,1529,1533,1535,1537,1539,1542,1544],{"class":258,"line":378},[256,1509,1511],{"class":1510},"sucPa","const",[256,1513,1515],{"class":1514},"sq2Xa"," App",[256,1517,1081],{"class":346},[256,1519,1460],{"class":1520},"sJUHq",[256,1522,892],{"class":346},[256,1524,1525],{"class":786},"lazy",[256,1527,1528],{"class":324},"(()",[256,1530,1532],{"class":1531},"s5MyL"," =>",[256,1534,889],{"class":872},[256,1536,869],{"class":324},[256,1538,853],{"class":366},[256,1540,1541],{"class":273},".\u002FApp",[256,1543,853],{"class":366},[256,1545,1546],{"class":324},"))\n",[256,1548,1549,1551,1554,1556,1559,1561],{"class":258,"line":397},[256,1550,1511],{"class":1510},[256,1552,1553],{"class":786}," AsyncApp",[256,1555,1081],{"class":346},[256,1557,1558],{"class":324}," ()",[256,1560,1532],{"class":1531},[256,1562,350],{"class":324},[256,1564,1565,1569],{"class":258,"line":405},[256,1566,1568],{"class":1567},"svvEX","  return",[256,1570,1571],{"class":324}," (\n",[256,1573,1574,1578,1581,1585,1588,1592,1595,1597,1600,1602],{"class":258,"line":419},[256,1575,1577],{"class":1576},"sd4Bp","    \u003C",[256,1579,1467],{"class":1580},"sQZMv",[256,1582,1584],{"class":1583},"sU3-j"," fallback",[256,1586,1587],{"class":346},"=",[256,1589,1591],{"class":1590},"sgi5Y","{",[256,1593,1594],{"class":1576},"\u003C",[256,1596,1490],{"class":1580},[256,1598,1599],{"class":1576}," \u002F>",[256,1601,687],{"class":1590},[256,1603,1604],{"class":1576},">\n",[256,1606,1607,1610,1613],{"class":258,"line":438},[256,1608,1609],{"class":1576},"      \u003C",[256,1611,1612],{"class":1580},"App",[256,1614,1615],{"class":1576}," \u002F>\n",[256,1617,1618,1621,1623],{"class":258,"line":444},[256,1619,1620],{"class":1576},"    \u003C\u002F",[256,1622,1467],{"class":1580},[256,1624,1604],{"class":1576},[256,1626,1627],{"class":258,"line":638},[256,1628,1629],{"class":324},"  )\n",[256,1631,1632],{"class":258,"line":643},[256,1633,447],{"class":324},[256,1635,1636,1638,1640],{"class":258,"line":654},[256,1637,780],{"class":702},[256,1639,783],{"class":702},[256,1641,1642],{"class":1520}," AsyncApp\n",[10,1644,1645],{},"路徑: src\u002Fapps\u002FDesktop\u002Frouter.tsx",[247,1647,1649],{"className":1057,"code":1648,"language":1060,"meta":660,"style":252},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Frouter.tsx\nimport { lazy, Suspense } from 'react'\nimport { Route, Routes } from 'react-router-dom'\n\nconst Home = lazy(() => import('.\u002Fpages\u002FHome'))\nconst About = lazy(() => import('.\u002Fpages\u002FAbout'))\nconst Product = lazy(() => import('.\u002Fpages\u002FProduct'))\n\nconst IRoute = () => {\n  return (\n    \u003CSuspense>\n      \u003CRoutes>\n        \u003CRoute path=\"\u002F\" element={\u003CHome \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fabout\" element={\u003CAbout \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fproduct\" element={\u003CProduct \u002F>} \u002F>\n      \u003C\u002FRoutes>\n    \u003C\u002FSuspense>\n  )\n}\n\nexport default IRoute\n",[38,1650,1651,1656,1679,1703,1707,1736,1764,1792,1796,1811,1817,1825,1834,1871,1905,1939,1948,1956,1960,1964,1968],{"__ignoreMap":252},[256,1652,1653],{"class":258,"line":259},[256,1654,1655],{"class":262},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Frouter.tsx\n",[256,1657,1658,1660,1662,1664,1666,1669,1671,1673,1675,1677],{"class":258,"line":266},[256,1659,703],{"class":702},[256,1661,706],{"class":324},[256,1663,1525],{"class":709},[256,1665,713],{"class":346},[256,1667,1668],{"class":709}," Suspense",[256,1670,719],{"class":324},[256,1672,722],{"class":702},[256,1674,725],{"class":366},[256,1676,359],{"class":273},[256,1678,731],{"class":366},[256,1680,1681,1683,1685,1688,1690,1693,1695,1697,1699,1701],{"class":258,"line":281},[256,1682,703],{"class":702},[256,1684,706],{"class":324},[256,1686,1687],{"class":709},"Route",[256,1689,713],{"class":346},[256,1691,1692],{"class":709}," Routes",[256,1694,719],{"class":324},[256,1696,722],{"class":702},[256,1698,725],{"class":366},[256,1700,569],{"class":273},[256,1702,731],{"class":366},[256,1704,1705],{"class":258,"line":287},[256,1706,696],{"emptyLinePlaceholder":695},[256,1708,1709,1711,1714,1716,1719,1721,1723,1725,1727,1729,1732,1734],{"class":258,"line":297},[256,1710,1511],{"class":1510},[256,1712,1713],{"class":1514}," Home",[256,1715,1081],{"class":346},[256,1717,1718],{"class":786}," lazy",[256,1720,1528],{"class":324},[256,1722,1532],{"class":1531},[256,1724,889],{"class":872},[256,1726,869],{"class":324},[256,1728,853],{"class":366},[256,1730,1731],{"class":273},".\u002Fpages\u002FHome",[256,1733,853],{"class":366},[256,1735,1546],{"class":324},[256,1737,1738,1740,1743,1745,1747,1749,1751,1753,1755,1757,1760,1762],{"class":258,"line":378},[256,1739,1511],{"class":1510},[256,1741,1742],{"class":1514}," About",[256,1744,1081],{"class":346},[256,1746,1718],{"class":786},[256,1748,1528],{"class":324},[256,1750,1532],{"class":1531},[256,1752,889],{"class":872},[256,1754,869],{"class":324},[256,1756,853],{"class":366},[256,1758,1759],{"class":273},".\u002Fpages\u002FAbout",[256,1761,853],{"class":366},[256,1763,1546],{"class":324},[256,1765,1766,1768,1771,1773,1775,1777,1779,1781,1783,1785,1788,1790],{"class":258,"line":397},[256,1767,1511],{"class":1510},[256,1769,1770],{"class":1514}," Product",[256,1772,1081],{"class":346},[256,1774,1718],{"class":786},[256,1776,1528],{"class":324},[256,1778,1532],{"class":1531},[256,1780,889],{"class":872},[256,1782,869],{"class":324},[256,1784,853],{"class":366},[256,1786,1787],{"class":273},".\u002Fpages\u002FProduct",[256,1789,853],{"class":366},[256,1791,1546],{"class":324},[256,1793,1794],{"class":258,"line":405},[256,1795,696],{"emptyLinePlaceholder":695},[256,1797,1798,1800,1803,1805,1807,1809],{"class":258,"line":419},[256,1799,1511],{"class":1510},[256,1801,1802],{"class":786}," IRoute",[256,1804,1081],{"class":346},[256,1806,1558],{"class":324},[256,1808,1532],{"class":1531},[256,1810,350],{"class":324},[256,1812,1813,1815],{"class":258,"line":438},[256,1814,1568],{"class":1567},[256,1816,1571],{"class":324},[256,1818,1819,1821,1823],{"class":258,"line":444},[256,1820,1577],{"class":1576},[256,1822,1467],{"class":1580},[256,1824,1604],{"class":1576},[256,1826,1827,1829,1832],{"class":258,"line":638},[256,1828,1609],{"class":1576},[256,1830,1831],{"class":1580},"Routes",[256,1833,1604],{"class":1576},[256,1835,1836,1839,1841,1844,1846,1848,1851,1853,1856,1858,1860,1862,1865,1867,1869],{"class":258,"line":643},[256,1837,1838],{"class":1576},"        \u003C",[256,1840,1687],{"class":1580},[256,1842,1843],{"class":1583}," path",[256,1845,1587],{"class":346},[256,1847,343],{"class":366},[256,1849,1850],{"class":273},"\u002F",[256,1852,343],{"class":366},[256,1854,1855],{"class":1583}," element",[256,1857,1587],{"class":346},[256,1859,1591],{"class":1590},[256,1861,1594],{"class":1576},[256,1863,1864],{"class":1580},"Home",[256,1866,1599],{"class":1576},[256,1868,687],{"class":1590},[256,1870,1615],{"class":1576},[256,1872,1873,1875,1877,1879,1881,1883,1886,1888,1890,1892,1894,1896,1899,1901,1903],{"class":258,"line":654},[256,1874,1838],{"class":1576},[256,1876,1687],{"class":1580},[256,1878,1843],{"class":1583},[256,1880,1587],{"class":346},[256,1882,343],{"class":366},[256,1884,1885],{"class":273},"\u002Fabout",[256,1887,343],{"class":366},[256,1889,1855],{"class":1583},[256,1891,1587],{"class":346},[256,1893,1591],{"class":1590},[256,1895,1594],{"class":1576},[256,1897,1898],{"class":1580},"About",[256,1900,1599],{"class":1576},[256,1902,687],{"class":1590},[256,1904,1615],{"class":1576},[256,1906,1907,1909,1911,1913,1915,1917,1920,1922,1924,1926,1928,1930,1933,1935,1937],{"class":258,"line":655},[256,1908,1838],{"class":1576},[256,1910,1687],{"class":1580},[256,1912,1843],{"class":1583},[256,1914,1587],{"class":346},[256,1916,343],{"class":366},[256,1918,1919],{"class":273},"\u002Fproduct",[256,1921,343],{"class":366},[256,1923,1855],{"class":1583},[256,1925,1587],{"class":346},[256,1927,1591],{"class":1590},[256,1929,1594],{"class":1576},[256,1931,1932],{"class":1580},"Product",[256,1934,1599],{"class":1576},[256,1936,687],{"class":1590},[256,1938,1615],{"class":1576},[256,1940,1941,1944,1946],{"class":258,"line":656},[256,1942,1943],{"class":1576},"      \u003C\u002F",[256,1945,1831],{"class":1580},[256,1947,1604],{"class":1576},[256,1949,1950,1952,1954],{"class":258,"line":657},[256,1951,1620],{"class":1576},[256,1953,1467],{"class":1580},[256,1955,1604],{"class":1576},[256,1957,1958],{"class":258,"line":658},[256,1959,1629],{"class":324},[256,1961,1962],{"class":258,"line":932},[256,1963,447],{"class":324},[256,1965,1966],{"class":258,"line":1286},[256,1967,696],{"emptyLinePlaceholder":695},[256,1969,1970,1972,1974],{"class":258,"line":1292},[256,1971,780],{"class":702},[256,1973,783],{"class":702},[256,1975,1976],{"class":1520}," IRoute\n",[10,1978,1979],{},"路徑: src\u002Fapps\u002FDesktop\u002FApp.tsx",[247,1981,1983],{"className":1057,"code":1982,"language":1060,"meta":660,"style":252},"\u002F\u002F src\u002Fapps\u002FDesktop\u002FApp.tsx\nimport { BrowserRouter, Link } from 'react-router-dom'\n\nimport IRoute from '.\u002Frouter'\n\nconst App = () => {\n  return (\n    \u003CBrowserRouter>\n      \u003Ch1>Desktop App component\u003C\u002Fh1>\n      \u003CLink to=\"\u002F\">Home\u003C\u002FLink>\n      \u003CLink to=\"\u002Fabout\">About\u003C\u002FLink>\n      \u003CLink to=\"\u002Fproduct\">Product\u003C\u002FLink>\n      \u003CIRoute \u002F>\n    \u003C\u002FBrowserRouter>\n  )\n}\n\nexport default App\n",[38,1984,1985,1990,2014,2018,2033,2037,2051,2057,2065,2087,2115,2141,2167,2176,2184,2188,2192,2196],{"__ignoreMap":252},[256,1986,1987],{"class":258,"line":259},[256,1988,1989],{"class":262},"\u002F\u002F src\u002Fapps\u002FDesktop\u002FApp.tsx\n",[256,1991,1992,1994,1996,1999,2001,2004,2006,2008,2010,2012],{"class":258,"line":266},[256,1993,703],{"class":702},[256,1995,706],{"class":324},[256,1997,1998],{"class":709},"BrowserRouter",[256,2000,713],{"class":346},[256,2002,2003],{"class":709}," Link",[256,2005,719],{"class":324},[256,2007,722],{"class":702},[256,2009,725],{"class":366},[256,2011,569],{"class":273},[256,2013,731],{"class":366},[256,2015,2016],{"class":258,"line":281},[256,2017,696],{"emptyLinePlaceholder":695},[256,2019,2020,2022,2024,2026,2028,2031],{"class":258,"line":287},[256,2021,703],{"class":702},[256,2023,1802],{"class":709},[256,2025,722],{"class":702},[256,2027,725],{"class":366},[256,2029,2030],{"class":273},".\u002Frouter",[256,2032,731],{"class":366},[256,2034,2035],{"class":258,"line":297},[256,2036,696],{"emptyLinePlaceholder":695},[256,2038,2039,2041,2043,2045,2047,2049],{"class":258,"line":378},[256,2040,1511],{"class":1510},[256,2042,1515],{"class":786},[256,2044,1081],{"class":346},[256,2046,1558],{"class":324},[256,2048,1532],{"class":1531},[256,2050,350],{"class":324},[256,2052,2053,2055],{"class":258,"line":397},[256,2054,1568],{"class":1567},[256,2056,1571],{"class":324},[256,2058,2059,2061,2063],{"class":258,"line":405},[256,2060,1577],{"class":1576},[256,2062,1998],{"class":1580},[256,2064,1604],{"class":1576},[256,2066,2067,2069,2073,2076,2080,2083,2085],{"class":258,"line":419},[256,2068,1609],{"class":1576},[256,2070,2072],{"class":2071},"s77fc","h1",[256,2074,2075],{"class":1576},">",[256,2077,2079],{"class":2078},"sKQyH","Desktop App component",[256,2081,2082],{"class":1576},"\u003C\u002F",[256,2084,2072],{"class":2071},[256,2086,1604],{"class":1576},[256,2088,2089,2091,2094,2097,2099,2101,2103,2105,2107,2109,2111,2113],{"class":258,"line":438},[256,2090,1609],{"class":1576},[256,2092,2093],{"class":1580},"Link",[256,2095,2096],{"class":1583}," to",[256,2098,1587],{"class":346},[256,2100,343],{"class":366},[256,2102,1850],{"class":273},[256,2104,343],{"class":366},[256,2106,2075],{"class":1576},[256,2108,1864],{"class":2078},[256,2110,2082],{"class":1576},[256,2112,2093],{"class":1580},[256,2114,1604],{"class":1576},[256,2116,2117,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139],{"class":258,"line":444},[256,2118,1609],{"class":1576},[256,2120,2093],{"class":1580},[256,2122,2096],{"class":1583},[256,2124,1587],{"class":346},[256,2126,343],{"class":366},[256,2128,1885],{"class":273},[256,2130,343],{"class":366},[256,2132,2075],{"class":1576},[256,2134,1898],{"class":2078},[256,2136,2082],{"class":1576},[256,2138,2093],{"class":1580},[256,2140,1604],{"class":1576},[256,2142,2143,2145,2147,2149,2151,2153,2155,2157,2159,2161,2163,2165],{"class":258,"line":638},[256,2144,1609],{"class":1576},[256,2146,2093],{"class":1580},[256,2148,2096],{"class":1583},[256,2150,1587],{"class":346},[256,2152,343],{"class":366},[256,2154,1919],{"class":273},[256,2156,343],{"class":366},[256,2158,2075],{"class":1576},[256,2160,1932],{"class":2078},[256,2162,2082],{"class":1576},[256,2164,2093],{"class":1580},[256,2166,1604],{"class":1576},[256,2168,2169,2171,2174],{"class":258,"line":643},[256,2170,1609],{"class":1576},[256,2172,2173],{"class":1580},"IRoute",[256,2175,1615],{"class":1576},[256,2177,2178,2180,2182],{"class":258,"line":654},[256,2179,1620],{"class":1576},[256,2181,1998],{"class":1580},[256,2183,1604],{"class":1576},[256,2185,2186],{"class":258,"line":655},[256,2187,1629],{"class":324},[256,2189,2190],{"class":258,"line":656},[256,2191,447],{"class":324},[256,2193,2194],{"class":258,"line":657},[256,2195,696],{"emptyLinePlaceholder":695},[256,2197,2198,2200,2202],{"class":258,"line":658},[256,2199,780],{"class":702},[256,2201,783],{"class":702},[256,2203,2204],{"class":1520}," App\n",[10,2206,2207],{},"路徑: src\u002Fapps\u002FDesktop\u002Fpages\u002FAbout.tsx",[10,2209,2210],{},"路徑: src\u002Fapps\u002FDesktop\u002Fpages\u002FHome.tsx",[10,2212,2213],{},"路徑: src\u002Fapps\u002FDesktop\u002Fpages\u002FProdcut.tsx",[247,2215,2217],{"className":1057,"code":2216,"language":1060,"meta":660,"style":252},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Fpages\u002FAbout.tsx\nfunction About() {\n  return (\n    \u003Cdiv>\n      \u003Ch1>This is the Desktop About page\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  );\n}\nexport default About;\n\n\u002F\u002F src\u002Fapps\u002FDesktop\u002Fpages\u002FHome.tsx\nfunction Home() {\n  return (\n    \u003Cdiv>\n      \u003Ch1>This is the Desktop Home page\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  );\n}\nexport default Home;\n\n\u002F\u002F src\u002Fapps\u002FDesktop\u002Fpages\u002FProdcut.tsx\nfunction Product() {\n  return (\n    \u003Cdiv>\n      \u003Ch1>This is the Desktop Product page\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  );\n}\nexport default Product;\n",[38,2218,2219,2224,2236,2242,2251,2268,2276,2284,2288,2298,2302,2307,2317,2323,2331,2348,2356,2362,2366,2376,2380,2385,2395,2401,2409,2426,2434,2440,2444],{"__ignoreMap":252},[256,2220,2221],{"class":258,"line":259},[256,2222,2223],{"class":262},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Fpages\u002FAbout.tsx\n",[256,2225,2226,2229,2231,2234],{"class":258,"line":266},[256,2227,2228],{"class":1531},"function",[256,2230,1742],{"class":786},[256,2232,2233],{"class":324},"()",[256,2235,350],{"class":324},[256,2237,2238,2240],{"class":258,"line":281},[256,2239,1568],{"class":1567},[256,2241,1571],{"class":324},[256,2243,2244,2246,2249],{"class":258,"line":287},[256,2245,1577],{"class":1576},[256,2247,2248],{"class":2071},"div",[256,2250,1604],{"class":1576},[256,2252,2253,2255,2257,2259,2262,2264,2266],{"class":258,"line":297},[256,2254,1609],{"class":1576},[256,2256,2072],{"class":2071},[256,2258,2075],{"class":1576},[256,2260,2261],{"class":2078},"This is the Desktop About page",[256,2263,2082],{"class":1576},[256,2265,2072],{"class":2071},[256,2267,1604],{"class":1576},[256,2269,2270,2272,2274],{"class":258,"line":378},[256,2271,1620],{"class":1576},[256,2273,2248],{"class":2071},[256,2275,1604],{"class":1576},[256,2277,2278,2281],{"class":258,"line":397},[256,2279,2280],{"class":324},"  )",[256,2282,2283],{"class":346},";\n",[256,2285,2286],{"class":258,"line":405},[256,2287,447],{"class":324},[256,2289,2290,2292,2294,2296],{"class":258,"line":419},[256,2291,780],{"class":702},[256,2293,783],{"class":702},[256,2295,1742],{"class":1520},[256,2297,2283],{"class":346},[256,2299,2300],{"class":258,"line":438},[256,2301,696],{"emptyLinePlaceholder":695},[256,2303,2304],{"class":258,"line":444},[256,2305,2306],{"class":262},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Fpages\u002FHome.tsx\n",[256,2308,2309,2311,2313,2315],{"class":258,"line":638},[256,2310,2228],{"class":1531},[256,2312,1713],{"class":786},[256,2314,2233],{"class":324},[256,2316,350],{"class":324},[256,2318,2319,2321],{"class":258,"line":643},[256,2320,1568],{"class":1567},[256,2322,1571],{"class":324},[256,2324,2325,2327,2329],{"class":258,"line":654},[256,2326,1577],{"class":1576},[256,2328,2248],{"class":2071},[256,2330,1604],{"class":1576},[256,2332,2333,2335,2337,2339,2342,2344,2346],{"class":258,"line":655},[256,2334,1609],{"class":1576},[256,2336,2072],{"class":2071},[256,2338,2075],{"class":1576},[256,2340,2341],{"class":2078},"This is the Desktop Home page",[256,2343,2082],{"class":1576},[256,2345,2072],{"class":2071},[256,2347,1604],{"class":1576},[256,2349,2350,2352,2354],{"class":258,"line":656},[256,2351,1620],{"class":1576},[256,2353,2248],{"class":2071},[256,2355,1604],{"class":1576},[256,2357,2358,2360],{"class":258,"line":657},[256,2359,2280],{"class":324},[256,2361,2283],{"class":346},[256,2363,2364],{"class":258,"line":658},[256,2365,447],{"class":324},[256,2367,2368,2370,2372,2374],{"class":258,"line":932},[256,2369,780],{"class":702},[256,2371,783],{"class":702},[256,2373,1713],{"class":1520},[256,2375,2283],{"class":346},[256,2377,2378],{"class":258,"line":1286},[256,2379,696],{"emptyLinePlaceholder":695},[256,2381,2382],{"class":258,"line":1292},[256,2383,2384],{"class":262},"\u002F\u002F src\u002Fapps\u002FDesktop\u002Fpages\u002FProdcut.tsx\n",[256,2386,2387,2389,2391,2393],{"class":258,"line":1298},[256,2388,2228],{"class":1531},[256,2390,1770],{"class":786},[256,2392,2233],{"class":324},[256,2394,350],{"class":324},[256,2396,2397,2399],{"class":258,"line":1304},[256,2398,1568],{"class":1567},[256,2400,1571],{"class":324},[256,2402,2403,2405,2407],{"class":258,"line":1310},[256,2404,1577],{"class":1576},[256,2406,2248],{"class":2071},[256,2408,1604],{"class":1576},[256,2410,2411,2413,2415,2417,2420,2422,2424],{"class":258,"line":1316},[256,2412,1609],{"class":1576},[256,2414,2072],{"class":2071},[256,2416,2075],{"class":1576},[256,2418,2419],{"class":2078},"This is the Desktop Product page",[256,2421,2082],{"class":1576},[256,2423,2072],{"class":2071},[256,2425,1604],{"class":1576},[256,2427,2428,2430,2432],{"class":258,"line":1322},[256,2429,1620],{"class":1576},[256,2431,2248],{"class":2071},[256,2433,1604],{"class":1576},[256,2435,2436,2438],{"class":258,"line":1328},[256,2437,2280],{"class":324},[256,2439,2283],{"class":346},[256,2441,2442],{"class":258,"line":1334},[256,2443,447],{"class":324},[256,2445,2446,2448,2450,2452],{"class":258,"line":1340},[256,2447,780],{"class":702},[256,2449,783],{"class":702},[256,2451,1770],{"class":1520},[256,2453,2283],{"class":346},[1139,2455],{},[10,2457,2458],{},"以上就能建立起 Desktop 初始的資料結構了，接著 Mobile 也一樣做法\n接著我們利用 react-responsive 幫助我們判斷什麼時候要載入哪一個版本的 code",[247,2460,2462],{"className":249,"code":2461,"language":251,"meta":252,"style":252},"yarn add react-responsive\n",[38,2463,2464],{"__ignoreMap":252},[256,2465,2466,2468,2470],{"class":258,"line":259},[256,2467,471],{"class":269},[256,2469,474],{"class":273},[256,2471,2472],{"class":273}," react-responsive\n",[10,2474,2475],{},"路徑: src\u002Fhoc\u002Fresponsive.tsx",[247,2477,2479],{"className":1057,"code":2478,"language":1060,"meta":660,"style":252},"\u002F\u002F src\u002Fhoc\u002Fresponsive.tsx\nimport MediaQuery from 'react-responsive'\n\nconst MOBILE_QUERY = '(max-width: 767px)'\n\ntype ScreenProps = {\n  Mobile: React.ElementType,\n  Desktop: React.ElementType,\n}\n\nconst Screen =\n  ({ Mobile, Desktop }: ScreenProps) =>\n  ({ ...rest }) =>\n    (\n      \u003CMediaQuery query={MOBILE_QUERY}>\n        {(matches) => (matches ? \u003CMobile {...rest} \u002F> : \u003CDesktop {...rest} \u002F>)}\n      \u003C\u002FMediaQuery>\n    )\n\nexport default Screen\n",[38,2480,2481,2486,2501,2505,2521,2525,2538,2554,2569,2573,2577,2587,2614,2633,2638,2660,2723,2731,2736,2740],{"__ignoreMap":252},[256,2482,2483],{"class":258,"line":259},[256,2484,2485],{"class":262},"\u002F\u002F src\u002Fhoc\u002Fresponsive.tsx\n",[256,2487,2488,2490,2493,2495,2497,2499],{"class":258,"line":266},[256,2489,703],{"class":702},[256,2491,2492],{"class":709}," MediaQuery",[256,2494,722],{"class":702},[256,2496,725],{"class":366},[256,2498,1160],{"class":273},[256,2500,731],{"class":366},[256,2502,2503],{"class":258,"line":281},[256,2504,696],{"emptyLinePlaceholder":695},[256,2506,2507,2509,2512,2514,2516,2519],{"class":258,"line":287},[256,2508,1511],{"class":1510},[256,2510,2511],{"class":1514}," MOBILE_QUERY",[256,2513,1081],{"class":346},[256,2515,725],{"class":366},[256,2517,2518],{"class":273},"(max-width: 767px)",[256,2520,731],{"class":366},[256,2522,2523],{"class":258,"line":297},[256,2524,696],{"emptyLinePlaceholder":695},[256,2526,2527,2530,2534,2536],{"class":258,"line":378},[256,2528,2529],{"class":1531},"type",[256,2531,2533],{"class":2532},"s6M8u"," ScreenProps",[256,2535,1081],{"class":346},[256,2537,350],{"class":324},[256,2539,2540,2543,2545,2547,2549,2552],{"class":258,"line":397},[256,2541,2542],{"class":1520},"  Mobile",[256,2544,347],{"class":346},[256,2546,1460],{"class":2532},[256,2548,892],{"class":346},[256,2550,2551],{"class":2532},"ElementType",[256,2553,375],{"class":346},[256,2555,2556,2559,2561,2563,2565,2567],{"class":258,"line":405},[256,2557,2558],{"class":1520},"  Desktop",[256,2560,347],{"class":346},[256,2562,1460],{"class":2532},[256,2564,892],{"class":346},[256,2566,2551],{"class":2532},[256,2568,375],{"class":346},[256,2570,2571],{"class":258,"line":419},[256,2572,447],{"class":324},[256,2574,2575],{"class":258,"line":438},[256,2576,696],{"emptyLinePlaceholder":695},[256,2578,2579,2581,2584],{"class":258,"line":444},[256,2580,1511],{"class":1510},[256,2582,2583],{"class":1514}," Screen",[256,2585,2586],{"class":346}," =\n",[256,2588,2589,2592,2594,2598,2600,2603,2606,2608,2611],{"class":258,"line":638},[256,2590,2591],{"class":324},"  (",[256,2593,1591],{"class":346},[256,2595,2597],{"class":2596},"s_ePm"," Mobile",[256,2599,713],{"class":346},[256,2601,2602],{"class":2596}," Desktop",[256,2604,2605],{"class":346}," }:",[256,2607,2533],{"class":2532},[256,2609,2610],{"class":324},")",[256,2612,2613],{"class":1531}," =>\n",[256,2615,2616,2618,2620,2624,2627,2629,2631],{"class":258,"line":643},[256,2617,2591],{"class":324},[256,2619,1591],{"class":346},[256,2621,2623],{"class":2622},"sk53b"," ...",[256,2625,2626],{"class":2596},"rest",[256,2628,719],{"class":346},[256,2630,2610],{"class":324},[256,2632,2613],{"class":1531},[256,2634,2635],{"class":258,"line":654},[256,2636,2637],{"class":324},"    (\n",[256,2639,2640,2642,2645,2648,2650,2652,2656,2658],{"class":258,"line":655},[256,2641,1609],{"class":1576},[256,2643,2644],{"class":1580},"MediaQuery",[256,2646,2647],{"class":1583}," query",[256,2649,1587],{"class":346},[256,2651,1591],{"class":1590},[256,2653,2655],{"class":2654},"sEHUx","MOBILE_QUERY",[256,2657,687],{"class":1590},[256,2659,1604],{"class":1576},[256,2661,2662,2665,2668,2671,2673,2675,2678,2680,2684,2687,2690,2692,2695,2697,2699,2701,2704,2706,2709,2711,2713,2715,2717,2719,2721],{"class":258,"line":656},[256,2663,2664],{"class":1590},"        {",[256,2666,869],{"class":2667},"submN",[256,2669,2670],{"class":2596},"matches",[256,2672,2610],{"class":2667},[256,2674,1532],{"class":1531},[256,2676,2677],{"class":2667}," (",[256,2679,2670],{"class":1520},[256,2681,2683],{"class":2682},"sny2E"," ?",[256,2685,2686],{"class":1576}," \u003C",[256,2688,2689],{"class":1580},"Mobile",[256,2691,680],{"class":1590},[256,2693,2694],{"class":2622},"...",[256,2696,2626],{"class":1520},[256,2698,687],{"class":1590},[256,2700,1599],{"class":1576},[256,2702,2703],{"class":2682}," :",[256,2705,2686],{"class":1576},[256,2707,2708],{"class":1580},"Desktop",[256,2710,680],{"class":1590},[256,2712,2694],{"class":2622},[256,2714,2626],{"class":1520},[256,2716,687],{"class":1590},[256,2718,1599],{"class":1576},[256,2720,2610],{"class":2667},[256,2722,447],{"class":1590},[256,2724,2725,2727,2729],{"class":258,"line":657},[256,2726,1943],{"class":1576},[256,2728,2644],{"class":1580},[256,2730,1604],{"class":1576},[256,2732,2733],{"class":258,"line":658},[256,2734,2735],{"class":324},"    )\n",[256,2737,2738],{"class":258,"line":932},[256,2739,696],{"emptyLinePlaceholder":695},[256,2741,2742,2744,2746],{"class":258,"line":1286},[256,2743,780],{"class":702},[256,2745,783],{"class":702},[256,2747,2748],{"class":1520}," Screen\n",[10,2750,2751],{},"路徑: src\u002FApp.tsx",[247,2753,2755],{"className":1057,"code":2754,"language":1060,"meta":660,"style":252},"import { Desktop, Mobile } from '@\u002Fapps'\nimport Responsive from '@\u002Fhoc\u002Fresponsive'\n\nfunction App() {\n  const Screen = Responsive({ Desktop, Mobile })\n  return (\n    \u003Cdiv>\n      \u003Cdiv>Root App Component\u003C\u002Fdiv>\n      \u003CScreen \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\nexport default App\n",[38,2756,2757,2780,2796,2800,2810,2833,2839,2847,2864,2873,2881,2885,2889,2893],{"__ignoreMap":252},[256,2758,2759,2761,2763,2765,2767,2769,2771,2773,2775,2778],{"class":258,"line":259},[256,2760,703],{"class":702},[256,2762,706],{"class":324},[256,2764,2708],{"class":709},[256,2766,713],{"class":346},[256,2768,2597],{"class":709},[256,2770,719],{"class":324},[256,2772,722],{"class":702},[256,2774,725],{"class":366},[256,2776,2777],{"class":273},"@\u002Fapps",[256,2779,731],{"class":366},[256,2781,2782,2784,2787,2789,2791,2794],{"class":258,"line":266},[256,2783,703],{"class":702},[256,2785,2786],{"class":709}," Responsive",[256,2788,722],{"class":702},[256,2790,725],{"class":366},[256,2792,2793],{"class":273},"@\u002Fhoc\u002Fresponsive",[256,2795,731],{"class":366},[256,2797,2798],{"class":258,"line":281},[256,2799,696],{"emptyLinePlaceholder":695},[256,2801,2802,2804,2806,2808],{"class":258,"line":287},[256,2803,2228],{"class":1531},[256,2805,1515],{"class":786},[256,2807,2233],{"class":324},[256,2809,350],{"class":324},[256,2811,2812,2815,2817,2819,2821,2824,2826,2828,2830],{"class":258,"line":297},[256,2813,2814],{"class":1510},"  const",[256,2816,2583],{"class":1514},[256,2818,1081],{"class":346},[256,2820,2786],{"class":786},[256,2822,2823],{"class":324},"({ ",[256,2825,2708],{"class":1520},[256,2827,713],{"class":346},[256,2829,2597],{"class":1520},[256,2831,2832],{"class":324}," })\n",[256,2834,2835,2837],{"class":258,"line":378},[256,2836,1568],{"class":1567},[256,2838,1571],{"class":324},[256,2840,2841,2843,2845],{"class":258,"line":397},[256,2842,1577],{"class":1576},[256,2844,2248],{"class":2071},[256,2846,1604],{"class":1576},[256,2848,2849,2851,2853,2855,2858,2860,2862],{"class":258,"line":405},[256,2850,1609],{"class":1576},[256,2852,2248],{"class":2071},[256,2854,2075],{"class":1576},[256,2856,2857],{"class":2078},"Root App Component",[256,2859,2082],{"class":1576},[256,2861,2248],{"class":2071},[256,2863,1604],{"class":1576},[256,2865,2866,2868,2871],{"class":258,"line":419},[256,2867,1609],{"class":1576},[256,2869,2870],{"class":1580},"Screen",[256,2872,1615],{"class":1576},[256,2874,2875,2877,2879],{"class":258,"line":438},[256,2876,1620],{"class":1576},[256,2878,2248],{"class":2071},[256,2880,1604],{"class":1576},[256,2882,2883],{"class":258,"line":444},[256,2884,1629],{"class":324},[256,2886,2887],{"class":258,"line":638},[256,2888,447],{"class":324},[256,2890,2891],{"class":258,"line":643},[256,2892,696],{"emptyLinePlaceholder":695},[256,2894,2895,2897,2899],{"class":258,"line":654},[256,2896,780],{"class":702},[256,2898,783],{"class":702},[256,2900,2204],{"class":1520},[10,2902,2903,2904,2908],{},"已上就是全部了，不清楚的可以去看",[13,2905,2907],{"href":15,"rel":2906},[17],"dmoe","，開 Network 去觀察",[10,2910,2911],{},[156,2912],{"alt":2913,"src":2914},"deploy to real domain to check","\u002Fimages\u002Fpost\u002Freact-resposive-code-splitting\u002Ftest.webp",[27,2916,2917],{"id":2917},"結論",[10,2919,2920,2921,41,2924,41,2927,2930],{},"利用此架構的優點是可以將共用的 ",[38,2922,2923],{},"商業邏輯",[38,2925,2926],{},"API 路徑",[38,2928,2929],{},"共用元件"," 寫在一個地方共同維護就好，各自的版本可以專注於畫面上的邏輯就好。",[31,2932,2933,2936,2939],{},[34,2934,2935],{},"在同一個專案上更好設置 prettier、lint 之類的檢查工具，確保大家的代碼品質一致。",[34,2937,2938],{},"測試邏輯可以專注於共用的元件做測試，E2E test 還是要分版本測試",[34,2940,2941],{},"強制大家共用元件要寫的抽象，才能在雙版本上復用",[10,2943,2944],{},"總結來講此篇的方法只是簡單的 🙌🌰 ，每個專案的情境都不一樣，對你來說這可能不是最好的辦法，但在不想要用 monorepo 的架構下需要這樣維持雙版本的情況下，我認為這是個不錯的選擇了。最後還有些地方可以進行優化， 但這篇主要是給你一個可行的架構，剩下的地方就留給你們自行發揮啦～",[2946,2947,2948],"style",{},"html pre.shiki code .shM36, html code.shiki .shM36{--shiki-default:#008000;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .smeoz, html code.shiki .smeoz{--shiki-default:#795E26;--shiki-dark:#C0CAF5}html pre.shiki code .s58z3, html code.shiki .s58z3{--shiki-default:#A31515;--shiki-dark:#9ECE6A}html pre.shiki code .sLkO9, html code.shiki .sLkO9{--shiki-default:#0000FF;--shiki-dark:#E0AF68}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 .sNwUV, html code.shiki .sNwUV{--shiki-default:#000000;--shiki-dark:#9ABDF5}html pre.shiki code .sdf50, html code.shiki .sdf50{--shiki-default:#0451A5;--shiki-dark:#89DDFF}html pre.shiki code .spCCv, html code.shiki .spCCv{--shiki-default:#0451A5;--shiki-dark:#7AA2F7}html pre.shiki code .s6v6z, html code.shiki .s6v6z{--shiki-default:#000000;--shiki-dark:#89DDFF}html pre.shiki code .svi0L, html code.shiki .svi0L{--shiki-default:#0451A5;--shiki-dark:#0DB9D7}html pre.shiki code .sq7Q2, html code.shiki .sq7Q2{--shiki-default:#A31515;--shiki-dark:#89DDFF}html pre.shiki code .se7cl, html code.shiki .se7cl{--shiki-default:#0000FF;--shiki-default-font-style:inherit;--shiki-dark:#646E9C;--shiki-dark-font-style:italic}html pre.shiki code .sHKXH, html code.shiki .sHKXH{--shiki-default:#267F99;--shiki-default-font-style:inherit;--shiki-dark:#51597D;--shiki-dark-font-style:italic}html pre.shiki code .s6uJR, html code.shiki .s6uJR{--shiki-default:#267F99;--shiki-default-font-style:inherit;--shiki-dark:#646E9C;--shiki-dark-font-style:italic}html pre.shiki code .swGrk, html code.shiki .swGrk{--shiki-default:#AF00DB;--shiki-dark:#7DCFFF}html pre.shiki code .sTOFy, html code.shiki .sTOFy{--shiki-default:#001080;--shiki-dark:#0DB9D7}html pre.shiki code .sjNAT, html code.shiki .sjNAT{--shiki-default:#795E26;--shiki-dark:#7AA2F7}html pre.shiki code .sF_0_, html code.shiki .sF_0_{--shiki-default:#001080;--shiki-dark:#73DACA}html pre.shiki code .s4YYt, html code.shiki .s4YYt{--shiki-default:#001080;--shiki-dark:#89DDFF}html pre.shiki code .sCl7R, html code.shiki .sCl7R{--shiki-default:#001080;--shiki-dark:#41A6B5}html pre.shiki code .s00W4, html code.shiki .s00W4{--shiki-default:#0000FF;--shiki-dark:#89DDFF}html pre.shiki code .se0OL, html code.shiki .se0OL{--shiki-default:#001080;--shiki-dark:#7DCFFF}html pre.shiki code .sLNXl, html code.shiki .sLNXl{--shiki-default:#0451A5;--shiki-dark:#7DCFFF}html pre.shiki code .sX0bS, html code.shiki .sX0bS{--shiki-default:#267F99;--shiki-dark:#0DB9D7}html pre.shiki code .s0ObY, html code.shiki .s0ObY{--shiki-default:#0000FF;--shiki-dark:#FF9E64}html pre.shiki code .sucPa, html code.shiki .sucPa{--shiki-default:#0000FF;--shiki-default-font-style:inherit;--shiki-dark:#9D7CD8;--shiki-dark-font-style:italic}html pre.shiki code .sq2Xa, html code.shiki .sq2Xa{--shiki-default:#0070C1;--shiki-dark:#BB9AF7}html pre.shiki code .sJUHq, html code.shiki .sJUHq{--shiki-default:#001080;--shiki-dark:#C0CAF5}html pre.shiki code .s5MyL, html code.shiki .s5MyL{--shiki-default:#0000FF;--shiki-dark:#BB9AF7}html pre.shiki code .svvEX, html code.shiki .svvEX{--shiki-default:#AF00DB;--shiki-default-font-style:inherit;--shiki-dark:#BB9AF7;--shiki-dark-font-style:italic}html pre.shiki code .sd4Bp, html code.shiki .sd4Bp{--shiki-default:#800000;--shiki-dark:#BA3C97}html pre.shiki code .sQZMv, html code.shiki .sQZMv{--shiki-default:#267F99;--shiki-dark:#DE5971}html pre.shiki code .sU3-j, html code.shiki .sU3-j{--shiki-default:#E50000;--shiki-dark:#BB9AF7}html pre.shiki code .sgi5Y, html code.shiki .sgi5Y{--shiki-default:#0000FF;--shiki-dark:#7DCFFF}html pre.shiki code .s77fc, html code.shiki .s77fc{--shiki-default:#800000;--shiki-dark:#F7768E}html pre.shiki code .sKQyH, html code.shiki .sKQyH{--shiki-default:#000000;--shiki-dark:#9AA5CE}html pre.shiki code .s6M8u, html code.shiki .s6M8u{--shiki-default:#267F99;--shiki-dark:#C0CAF5}html pre.shiki code .s_ePm, html code.shiki .s_ePm{--shiki-default:#001080;--shiki-dark:#E0AF68}html pre.shiki code .sk53b, html code.shiki .sk53b{--shiki-default:#000000;--shiki-default-font-weight:inherit;--shiki-dark:#F7768E;--shiki-dark-font-weight:bold}html pre.shiki code .sEHUx, html code.shiki .sEHUx{--shiki-default:#0070C1;--shiki-dark:#FF9E64}html pre.shiki code .submN, html code.shiki .submN{--shiki-default:#000000FF;--shiki-dark:#9ABDF5}html pre.shiki code .sny2E, html code.shiki .sny2E{--shiki-default:#000000;--shiki-dark:#BB9AF7}",{"title":252,"searchDepth":266,"depth":266,"links":2950},[2951,2952,2956,2960],{"id":29,"depth":266,"text":29},{"id":63,"depth":266,"text":63,"children":2953},[2954,2955],{"id":67,"depth":281,"text":67},{"id":113,"depth":281,"text":113},{"id":194,"depth":266,"text":195,"children":2957},[2958,2959],{"id":238,"depth":281,"text":238},{"id":1143,"depth":281,"text":1143},{"id":2917,"depth":266,"text":2917},"2023-05-24","md",false,"\u002Fimages\u002Fpost\u002Freact-resposive-code-splitting\u002Fpost.webp",{},"\u002Fpost\u002Freact-resposive-code-splitting",{"title":5,"description":18},{"loc":2966,"images":2969},[2970,2971,2972],{"loc":159},{"loc":168},{"loc":2914},"post\u002Freact-resposive-code-splitting","Desktop 與 Mobile(h5)版本，使用不同的domain，也拆分了不同的專案，要如何整合在同一個專案內？",[359,2976,2977,2978,2979],"code splitting","React Lazy","React Suspense","專案拆分","cHb1d0GxmTzS2Vjng3LFAx6ldQJfEPFusyqLSmVEGUQ",1791370767499]