個(gè)人中心
退出
新朝舊將 vite和webpack煮酒論英雄
我們見(jiàn)證了 webpack、Rollup 和 Parcel 等工具的變遷，它們極大地改善了前端開(kāi)發(fā)者的開(kāi)發(fā)體驗(yàn)。
但當(dāng)我們開(kāi)始構(gòu)建越來(lái)越大型的應(yīng)用時(shí)，通常需要很長(zhǎng)時(shí)間才能啟動(dòng)開(kāi)發(fā)服務(wù)器，文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來(lái)。如此循環(huán)往復(fù)，遲鈍的反饋會(huì)極大地影響開(kāi)發(fā)者的開(kāi)發(fā)效率。
「Vite」 旨在利用生態(tài)系統(tǒng)中的新進(jìn)展解決上述問(wèn)題：「瀏覽器開(kāi)始原生支持 ES 模塊，且越來(lái)越多 JavaScript 工具使用編譯型語(yǔ)言編寫(xiě)」。
一、Vite是什么？
Vite（法語(yǔ)意思是 “快”）是一種全新的前端構(gòu)建工具。可以把它理解為一個(gè)開(kāi)箱即用的開(kāi)發(fā)服務(wù)器 + 打包工具的組合，類(lèi)似webpack + webpack-dev-server，但是更輕更快。Vite 利用瀏覽器原生的 ES 模塊支持和用編譯到原生的語(yǔ)言開(kāi)發(fā)的工具（如 esbuild）來(lái)提供一個(gè)快速且現(xiàn)代的開(kāi)發(fā)體驗(yàn)。
二、Vite優(yōu)點(diǎn)是什么
三、Vite與Webpack對(duì)比
Webpack 和 Vite 同是打包工具，有什么區(qū)別呢？
Webpack
Webpack 會(huì)遍歷你的應(yīng)用程序中的所有文件，并啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器，然后將整個(gè)代碼渲染到開(kāi)發(fā)環(huán)境中。
webpack從一個(gè)entry.js文件開(kāi)始，將其依賴(lài)的所有js或者其他assets通過(guò)loader打包成一個(gè)文件， 隨后這個(gè)打包后的文件將被從server傳遞到客戶(hù)端瀏覽器運(yùn)行。
因?yàn)檫@樣的處理規(guī)則，當(dāng)保存文件時(shí)，整個(gè) JavaScript 包將由 Webpack 重新構(gòu)建，這就是為什么更改可能需要長(zhǎng)達(dá) 10 秒才能反映在瀏覽器中，更新速度會(huì)隨著應(yīng)用體積增長(zhǎng)而直線(xiàn)下降。
Vite
Vite 的工作方式不同，它不會(huì)遍歷整個(gè)應(yīng)用程序，Vite 只是轉(zhuǎn)換當(dāng)時(shí)正在使用的文件/模塊。
Vite的核心理念：非捆綁開(kāi)發(fā)構(gòu)建
Vite 的核心思想：瀏覽器請(qǐng)求它時(shí)，使用 ES 模塊轉(zhuǎn)換并提供一段應(yīng)用程序代碼。
開(kāi)始開(kāi)發(fā)構(gòu)建時(shí)，Vite首先將JavaScript 模塊分為兩類(lèi)：依賴(lài)模塊和源碼模塊。
依賴(lài)項(xiàng)模塊是第三方依賴(lài)的代碼，從node_modules文件夾中導(dǎo)入的JavaScript 模塊。這些模塊將使用esbuild進(jìn)行處理和捆綁，esbuild是一個(gè)用 Go 編寫(xiě)的 JavaScript 打包工具，執(zhí)行速度比 Webpack 快 10-100 倍。
源碼模塊是源代碼，即業(yè)務(wù)代碼，通常涉及特定庫(kù)的擴(kuò)展，如：.jsx、.vue、.scss文件。
它使用基于路由的代碼拆分來(lái)了解代碼的哪些部分實(shí)際需要加載，因此，它不必重新打包所有內(nèi)容。
它還使用現(xiàn)代瀏覽器中的原生 ES 模塊支持來(lái)交付代碼，這讓瀏覽器可以在開(kāi)發(fā)中承擔(dān)打包工作。
在生產(chǎn)方面，雖然現(xiàn)在所有主流瀏覽器都支持原生 ES 模塊，但它實(shí)現(xiàn)了諸如 tree-shaking、延遲加載和通用塊拆分等性能優(yōu)化技術(shù)，仍然比非打包應(yīng)用程序帶來(lái)更好的整體性能。出于這個(gè)原因，Vite附帶了一個(gè)預(yù)先配置的build命令，該命令使用Rollup打包來(lái)打包和實(shí)現(xiàn)各種性能優(yōu)化。
Webpack 這樣的基于打包器的工作流必須在單個(gè)瀏覽器請(qǐng)求之前處理整個(gè) JavaScript 模塊，但 Vite 只在單個(gè)瀏覽器請(qǐng)求之前處理依賴(lài)模塊。這就是為什么 Vite 能夠比 Webpack 更快地處理開(kāi)發(fā)構(gòu)建。
四、Storybook對(duì)Webpack和Vite的測(cè)試
Storybook是行業(yè)標(biāo)準(zhǔn)的 UI 組件工作室。全球數(shù)以千計(jì)的應(yīng)用程序和設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)大部分時(shí)間都在 Storybook 中工作——構(gòu)建、記錄和測(cè)試他們的 UI 組件。因此，Storybook 需要盡可能快地運(yùn)行項(xiàng)目。Webpack 是 Storybook 的默認(rèn)構(gòu)建器。
為了比較這Vite和Webpack兩個(gè)構(gòu)建器的性能，他們選擇針對(duì)Carbon Design System運(yùn)行基準(zhǔn)測(cè)試。
本文從原文中截取了Webpack 5.0 和 Vite的差異，還有 Webpack 4/Webpack 5(lc/cs)/Vite(cs)的差異對(duì)比，可以到原文中詳細(xì)閱讀~
對(duì)比項(xiàng)如下：
場(chǎng)景 Webpack 5.0 Vite 差異
開(kāi)發(fā)（冷啟動(dòng)） 61s 103s Vite首頁(yè)加載時(shí)速度較慢。
是因?yàn)関ite使用瀏覽器承載部分打包與模塊加載工作，
因此即使開(kāi)發(fā)服務(wù)器快速啟動(dòng)，但是瀏覽器也需要更多時(shí)間來(lái)下載和處理所有這些請(qǐng)求
生產(chǎn)構(gòu)建時(shí)間 77s 96s Vite 比 Webpack 需要更長(zhǎng)的時(shí)間來(lái)打包資源
Vite 不是為單個(gè)模塊提供服務(wù)，而是將所有內(nèi)容打包在一起，在底層，它使用 Rollup 來(lái)完成
生產(chǎn)構(gòu)建加載的大小 11.6M 9.4M Rollup打包的結(jié)果會(huì)把Dead Code一些無(wú)用的代碼以及一些不可達(dá)的代碼清除掉,
webpack打包的結(jié)果這些代碼依然存在，打包體積也大
所以Vite生產(chǎn)打包加載速度會(huì)稍微快一些
重建時(shí)間（熱模塊重新加載） 3.67s 0.53s 以上Vite并沒(méi)有z展示出真正的優(yōu)點(diǎn)，
真正的優(yōu)勢(shì)是保存時(shí)在瀏覽器中查看更改的近乎即時(shí)的反饋
以上是Storybook對(duì)項(xiàng)目使用Vite和Webpack不同構(gòu)建工具的性能的差異測(cè)試，可以看出來(lái)Vite的真正閃光點(diǎn)在于，開(kāi)發(fā)時(shí)瀏覽器接近實(shí)時(shí)反饋的效果。
五、Vite 入門(mén)
我們淺顯的學(xué)習(xí)一下Vite和Vue3.0創(chuàng)建一個(gè)項(xiàng)目，Vite支持流行的前端庫(kù)，包括 React、Vue 和 Svelte。
vite+ts+vue3，執(zhí)行以下命令
npm init @vitejs/app vite-test-app --template vue-ts
配置路由
npm install vue-router@4 --save
在src下新建router目錄，新建index.ts文件
import {createRouter, createWebHashHistory} from 'vue-router';
const routes = [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue')
},
{
path: '/:pathMatch(.*)*',
name: '404',
redirect: '/'
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
});
router.beforeEach((to, from, next) => {
//如果設(shè)置標(biāo)題就顯示，沒(méi)設(shè)置使用默認(rèn)
if (null != to.meta && null != to.meta.title && '' !== to.meta.title) {
document.title = to.meta.title || import.meta.env.VITE_APP_TITLE;
} else {
document.title = import.meta.env.VITE_APP_TITLE;
}
//正常放行
next();
});
export default router;
main.ts掛載路由
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
createApp(App)
.use(router)
.mount('#app')
配置數(shù)據(jù)中心vuex
npm i vuex@next --save
配置網(wǎng)絡(luò)請(qǐng)求axios 在src創(chuàng)建utils文件夾,并在utils下創(chuàng)建axios.ts
npm i -s axios
配置請(qǐng)求代理 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
export default defineConfig({
plugins: [vue()],
base:"./",//打包路徑
resolve: {
alias:{
'@': path.resolve(__dirname, './src')//設(shè)置別名
}
},
server: {
port: 80,
host: '0.0.0.0',
https: false,
},
})
頁(yè)面展示：
以上，一個(gè)vite+ts+vue3最基本的移動(dòng)端開(kāi)發(fā)配置完成。
總結(jié)
Vite 是新一代的 JavaScript 構(gòu)建工具，通過(guò)使用基于 ESM 的工作流程進(jìn)行本地開(kāi)發(fā)，確保開(kāi)發(fā)服務(wù)器即使在處理大型 JavaScript 應(yīng)用程序時(shí)也能保持快速。
Vite 還提供了一個(gè)合理的生產(chǎn)構(gòu)建配置，可以處理基于庫(kù)的語(yǔ)法，如 JSX、Vue 和 TypeScript。
通過(guò)在底層使用 Rollup，確保生產(chǎn)構(gòu)建實(shí)現(xiàn)性能優(yōu)化技術(shù)，如 tree-shaking、延遲加載和常見(jiàn)的塊拆分。
雖然 Webpack 仍然是許多流行應(yīng)用程序的默認(rèn) JavaScript 構(gòu)建工具，有很多擴(kuò)展和一個(gè)非常龐大的開(kāi)發(fā)者社區(qū)，鑒于社區(qū)的積極反饋，Vite 很有可能成為未來(lái)最受歡迎的選擇，但是在社區(qū)可以中看到很多新庫(kù)或框架，有多快或多好并不重要，重要的是社區(qū)如何采用它。
歡迎廣大讀者關(guān)注公眾號(hào)，我們會(huì)常推技術(shù)文章和大家分享，歡迎大家留言，小編后續(xù)會(huì)繼續(xù)改進(jìn)，感謝大家~
參考文獻(xiàn)：
https://cn.vitejs.dev/
https://webpack.docschina.org/concepts/
https://betterprogramming.pub/is-vite-the-killer-of-webpack-a515d9e77a4
https://blog.bitsrc.io/vite-is-better-than-webpack-d5dd59610d56
https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/
https://gitee.com/WeiziPlus/muteki-vite
https://radixweb.com/blog/webpack-vs-vitejs-comparison
https://zhuanlan.zhihu.com/p/351888882
作者：前端民工
歡迎關(guān)注微信公眾號(hào) ：前端民工
分類(lèi)導(dǎo)航