[{"data":1,"prerenderedAt":294},["ShallowReactive",2],{"blog:\u002Fblog\u002Fnodejs\u002Fvite":3},{"id":4,"title":5,"author":6,"body":7,"category":279,"date":280,"description":281,"draft":282,"extension":283,"image":284,"meta":285,"navigation":286,"path":287,"seo":288,"series":284,"seriesOrder":284,"seriesTitle":284,"stem":289,"tags":290,"updatedAt":284,"__hash__":293},"blog\u002Fblog\u002Fnodejs\u002Fvite\u002Findex.md","Vite - 稱霸網頁前端開發的開發工具","charles",{"type":8,"value":9,"toc":275},"minimark",[10,15,32,38,41,44,48,51,63,89,94,97,102,109,241,256,263,271],[11,12,14],"h2",{"id":13},"為什麼選擇-vite","為什麼選擇 Vite",[16,17,18,19,26,27],"p",{},"Vite 是近 3 年來最受歡迎的前端開發工具之一，在 state of javascript 2021 ~ 2023 中，在 ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002F2023.stateofjs.com\u002Fen-US\u002Flibraries\u002F#tier_list",[24],"nofollow","Library Tier List"," 皆為 S Tier，且留用率蟬聯第一名。\n認識 Node.js 的 Package Manager\n",[28,29],"img",{"alt":30,"src":31},"alt text","\u002Fimages\u002Fblog\u002Fnodejs\u002Fvite\u002Fimage.png",[33,34,35],"blockquote",{},[16,36,37],{},"Vite 的生態系豐富，下載量成長也相當迅速，目前已經超過 1500 萬次下載量，並且在 GitHub 上的 Star 數也達到 67.8k，超過了 webpack。",[16,39,40],{},"Vite 提供了一個極為快速的開發環境，並且支援熱模組替換（HMR）功能，讓開發者可以在開發過程中即時看到修改後的效果，並且不需要重新整理頁面。",[16,42,43],{},"在打包方面，相較於前一個世代的打包工具 webpack 的速度更快、打包後的檔案更小，即便 Webpack 積極優化下差距逐漸減少，但目前使用 Vite 的檔案異動後重新打包的速度仍然是 Webpack 的數倍，且 Vite 6 也將以 Rolldown (以 Rust 重寫的 Rollup) 作為打包工具，進一步提升打包速度。",[11,45,47],{"id":46},"安裝-vite","安裝 Vite",[16,49,50],{},"想要使用 Vite 作為前端框架的開發工具，需要先配置 node.js，以下我們以 Vite 搭配 Vue.js 建立一個專案為例。",[52,53,56],"callout",{"title":54,"type":55},"ℹ️ 提示","tip",[16,57,58,59],{},"若尚未安裝 node.js，參考這篇教學 ",[20,60,62],{"href":61},"\u002Fblog\u002Fnodejs\u002Fnvm","📝用 NVM 管理 Node.js 版本\n",[64,65,70],"pre",{"className":66,"code":67,"language":68,"meta":69,"style":69},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","pnpm create vite\n","bash","",[71,72,73],"code",{"__ignoreMap":69},[74,75,78,82,86],"span",{"class":76,"line":77},"line",1,[74,79,81],{"class":80},"sbgvK","pnpm",[74,83,85],{"class":84},"s_sjI"," create",[74,87,88],{"class":84}," vite\n",[16,90,91],{},[28,92],{"alt":30,"src":93},"\u002Fimages\u002Fblog\u002Fnodejs\u002Fvite\u002Fimage-1.png",[16,95,96],{},"產生的資料夾結構如下：",[16,98,99],{},[28,100],{"alt":30,"src":101},"\u002Fimages\u002Fblog\u002Fnodejs\u002Fvite\u002Fimage-2.png",[103,104,105],"ul",{},[106,107,108],"li",{},"package.json",[64,110,120],{"className":111,"code":112,"highlights":113,"language":119,"meta":69,"style":69},"language-json:line-numbers shiki shiki-themes material-theme-lighter github-light github-dark","{\n  \"name\": \"vite-project\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vue-tsc -b && vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"vue\": \"^3.5.10\"\n  },\n  \"devDependencies\": {\n    \"@vitejs\u002Fplugin-vue\": \"^5.1.4\",\n    \"typescript\": \"^5.5.3\",\n    \"vite\": \"^5.4.8\",\n    \"vue-tsc\": \"^2.1.6\"\n  }\n}\n",[114,115,116,117,118],6,7,8,9,10,"json:line-numbers",[71,121,122,127,133,139,145,151,158,164,170,176,182,188,194,199,205,211,217,223,229,235],{"__ignoreMap":69},[74,123,124],{"class":76,"line":77},[74,125,126],{},"{\n",[74,128,130],{"class":76,"line":129},2,[74,131,132],{},"  \"name\": \"vite-project\",\n",[74,134,136],{"class":76,"line":135},3,[74,137,138],{},"  \"private\": true,\n",[74,140,142],{"class":76,"line":141},4,[74,143,144],{},"  \"version\": \"0.0.0\",\n",[74,146,148],{"class":76,"line":147},5,[74,149,150],{},"  \"type\": \"module\",\n",[74,152,155],{"class":153,"line":114},[76,154],"highlight",[74,156,157],{},"  \"scripts\": {\n",[74,159,161],{"class":160,"line":115},[76,154],[74,162,163],{},"    \"dev\": \"vite\",\n",[74,165,167],{"class":166,"line":116},[76,154],[74,168,169],{},"    \"build\": \"vue-tsc -b && vite build\",\n",[74,171,173],{"class":172,"line":117},[76,154],[74,174,175],{},"    \"preview\": \"vite preview\"\n",[74,177,179],{"class":178,"line":118},[76,154],[74,180,181],{},"  },\n",[74,183,185],{"class":76,"line":184},11,[74,186,187],{},"  \"dependencies\": {\n",[74,189,191],{"class":76,"line":190},12,[74,192,193],{},"    \"vue\": \"^3.5.10\"\n",[74,195,197],{"class":76,"line":196},13,[74,198,181],{},[74,200,202],{"class":76,"line":201},14,[74,203,204],{},"  \"devDependencies\": {\n",[74,206,208],{"class":76,"line":207},15,[74,209,210],{},"    \"@vitejs\u002Fplugin-vue\": \"^5.1.4\",\n",[74,212,214],{"class":76,"line":213},16,[74,215,216],{},"    \"typescript\": \"^5.5.3\",\n",[74,218,220],{"class":76,"line":219},17,[74,221,222],{},"    \"vite\": \"^5.4.8\",\n",[74,224,226],{"class":76,"line":225},18,[74,227,228],{},"    \"vue-tsc\": \"^2.1.6\"\n",[74,230,232],{"class":76,"line":231},19,[74,233,234],{},"  }\n",[74,236,238],{"class":76,"line":237},20,[74,239,240],{},"}\n",[16,242,243,244,247,248,251,252,255],{},"其中 script 已經預填 Vite 最常用的指令，",[71,245,246],{},"dev"," 用於開發模式，",[71,249,250],{},"build"," 用於打包，",[71,253,254],{},"preview"," 用於預覽打包後的檔案。",[16,257,258,259,262],{},"透過 ",[71,260,261],{},"pnpm dev"," 即可啟動開發伺服器，所有的變更都會即時更新到瀏覽器中。",[16,264,265,266],{},"更多指令參數可以參考 ",[20,267,270],{"href":268,"rel":269},"https:\u002F\u002Fvite.dev\u002Fguide\u002Fcli#command-line-interface",[24],"🔗Vite Command Line Interface",[272,273,274],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":69,"searchDepth":135,"depth":135,"links":276},[277,278],{"id":13,"depth":129,"text":14},{"id":46,"depth":129,"text":47},"Node.js","2024-10-13","Vite 是一個由 Vue.js 團隊開發的網頁前端開發工具，用於開發與打包網頁前端專案。",false,"md",null,{},true,"\u002Fblog\u002Fnodejs\u002Fvite",{"title":5,"description":281},"blog\u002Fnodejs\u002Fvite\u002Findex",[279,291,292],"Vite","Frontend","CPk_ZjkvZBL4kA0IuASGhnTbfUR5wHw5VHywIrsB_GM",1780512500730]